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

Instructions

Horizontal Navigation Bar

  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.

    The Macro Browser with the Horizontal Navigation Bar macro available.

  6. Complete any optional parameters, e.g. add a title that is displayed to users as a tooltip on hover.

    Parameter

    Description

    Type

    Default

    Required

    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.

    string

    none

    (error)

    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.

    string

    none

    (error)

    Title

    Enter a title to be displayed as a tooltip.

    string

    none

    (error)

  7. Click Insert. The macro placeholder displays. You can now add your Horizontal Navigation Bar Page macros.

    A placeholder for the Horizontal Navigation bar macro.

Horizontal Navigation Bar Page

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

  1. Click 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, e.g. a specific font size or background color.

    Parameter

    Description

    Type

    Default

    Required

    Title

    Enter the title to attach to this content page, e.g. Stars.

    string

    none

    (tick)

    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.

    string

    none

    (error)

    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.

    string

    none

    (error)

  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.Horizontal Navigation Bar placeholders in edit view.

  6. Add your desired content then save the page to render the horizontal navigation.

Example with CSS

Using the example above,  a CSS Stylesheet macro is added to the page with the following style: 

.background {
background-color: #ADDFEE; border: double; padding:5px;
}
CSS

The CSS class is then added to the Horizontal Navigation Bar Page CSS Class parameter.


You can change the order of the bar pages by dragging the macro placeholder to the desired position.