The Adaptavist Group LogoDocumentation

Horizontal Navigation

Horizontal Navigation is a pair of macros that allows you to add an interactive AUI-styled horizontal navigation bar, making content easier to navigate and digest. Start by adding the Horizontal Navigation Bar macro to your page. This acts as a container for your navigation bar pages.

See also: Tabs

Add a Horizontal Navigation Bar to your page

  1. Navigate to the page you want to edit.
  2. Click Edit.
  3. Click the position where you want to add the navigation bar
  4. Click Insert More Content → Other Macros .
  5. Select the Horizontal Navigation Bar macro from the Macro Browser.
  6. Complete any optional parameters, e.g. add a title that is displayed to users as a tooltip on hover.
    Parameter DescriptionTypeDefaultRequired
    ID Option to specify a unique ID for this element. If using this parameter to apply styling to the element, do not include the # selector. stringnone
    CSS Class Option to apply a custom CSS class to the element. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the . selector in the class name. Classes must be part of your Global Confluence CSS or defined in a CSS Stylesheet macro that you have added to your page. stringnone
    TitleEnter a title to be displayed as a tooltip.stringnone
  7. Click Insert. The macro placeholder displays. You can now add your Horizontal Navigation Bar Page macros.
Horizontal Navigation Bar placeholder.

Individual Horizontal Navigation Bar Page macros must be added to the Horizontal Navigation Bar macro.

  1. Click inside the Horizontal Navigation Bar placeholder.
  2. Click Insert More Content → Other Macros .
  3. Select the Horizontal Navigation Bar Page macro from the Macro Browser.
  4. Enter the title to display as the bar header. You also have the option to assign styling to the macro content. eg. a specific font size or background color.
    ParameterDescriptionTypeDefaultRequired
    Title Enter the title to attach to this content page, e.g. Stars. stringnone
    ID Option to specify a unique ID for this element. If using this parameter to apply styling to the element, do not include the # selector. stringnone
    CSS Class Option to apply a custom CSS class to the element. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the . selector in the class name. Classes must be part of your Global Confluence CSS or defined in a CSS Stylesheet macro that you have added to your page. stringnone
  5. Click Insert. The macro placeholder displays with space to add your page content in the macro body. Add your desired content then save the page to render the horizontal navigation.
  6. Add your desired content then save the page to render the horizontal navigation.

Search documentation

Start typing to search the docs.