Navigation options for static pages

Navigation options for static pages

We can provide navigation for the static pages using either the portal theme or by making use of the navigation microformat.

Portal theme to provide navigation

To provide navigation for static pages using the portal theme, remove the <html> and <head> tags from your static page content. If you dthat, the portal renders the content as navigation.

Navigation microformat to provide navigation

If you have full static HTML pages with beginning and ending <html> tags in the portal, we might want to include links to other pages in the portal. In this case we write the HTML code so that it includes a navigation portlet in the page and makes use of the navigation microformat. Refer to the following list of class attributes and the example of the microformat navigation option.

first

This attribute denotes the first child in a list. This is required for CSS styling.

last

This attribute denotes the last child in a list. This is required for CSS styling.

expanded

This attribute denotes an expanded node. A node can only be expanded if it has children and its navigational state is set to expanded.

collapsed

This attribute denotes a collapsed node. A node can only be collapsed if it has children and its navigational state is set to collapsed.

page-actions

This attribute lists the actions available on the page. Typically, this list contains the actions used to expand or collapse the navigation nodes. For a page that is currently selected in the navigation, this list also contains the actions available for that page.

selected

This attribute denotes the page that is currently selected in the navigation.

pageoperation-expand

This attribute expands a collapsed node.

pageoperation-collapse

This attribute collapses an expanded node.

Example of the microformat navigation option

The following is an example of a microformat representation for a navigation for a page:
<div class="xoxo portal-navigation">
  <ul>
    <li class="first expanded">
      <a href='/wps/myportal/!ut/p/c5/ . . . . . '>Home</a>
      <ul>
        <li class="first">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Web 2.0 Introduction</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/e/'>Web 2.0 Portlets</a>
        </li>
        <li class="collapsed">
          <ul class="xoxo page-actions">
            <li class="pageoperation-expand">
              <a href='/wps/myportal/!ut/p/c5/e/'>Expand</a>
            </li>
          </ul>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Static Page Aggregation</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Navigation Page</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Nav1</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>IBM</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>dnd</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>derivable</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>deriv1</a>
        </li>
        <li class="selected last">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Container Test</a>
        </li>
      </ul>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Administration</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Resource Policy Editor</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Resource Policy Editor CA</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Domino Integration</a>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Templates</a>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Site 
      Map</a>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>About</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Login</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Edit My Profile</a>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Page Customizer</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Page Properties</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Template Parameters</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Template and Application Properties</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Template and Application Layout</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Application Roles</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Application Membership</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Policy Status</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Organize Favorites</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Search Seedlist</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>People Palette</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Content Palette</a>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Quick Links</a>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Theme 
      Links</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Open Tasks</a>
    </li>
    <li class="last collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Application Root</a>
    </li>
  </ul>
</div>
Parent: Define and render a static portal page in HTML
Related reference:
Example HTML markup for defining a portal page
Class attributes for portlets on static pages
Class attributes for a portlet container on static pages
Class attributes for components on static pages
Class attributes for iWidgets on static pages
Portlets for adding dynamic elements to static pages