Navigation options for static pages

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

Portal theme to provide navigation

To provide navigation for static pages by using the portal theme, remove the <html> and <head> tags from your static page content. If you do that, 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, you might want to include links to other pages in the portal.

In this case you write your 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 given further below.

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 that are 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 that are 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 topic:

Defining and rendering 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
Portlets for adding dynamic elements to static pages