Second Level Navigation

OutSystems
1

Related page navigation component.
This component presents a list of pages associated with a certain topic and below 992px this component has a collapse layout, where the links are not visible on load.

Libraries

Bootstrap
jQuery

HTML Code

 


Platform Pages



Overview



How to Implement

This component starts in the second-level-navigation div.

To place as plain html it is necessary to remove the grid value from the plain html component, and in order to keep the width of the screen, do not place it inside another component that is not full width, it should preferably be placed in the main.

The component has the same container width as the menu. In mobile the component has a margin bottom

Contents to fill:

  1. Both headings 6, one of which will be presented on the desktop and the other below 992px.
  2. In the button with the dropdown-toggle class, place the id of the corresponding nav element in the aria-target and aria-controls attributes. In the case of the aria target it must contain # before the name, for example: data-target = "# second-level-navigation__dropdown".
  3. In span.second-level-navigation__current put the name of the current page and change the content of the aria-label.
  4. In the nav, change the text of the aria-label to a content more appropriate to the links presented.
  5. In the links within the nav, place only on the current page aria-label = "current page, NAME OF THE PAGE" and aria-current = "page".
  6. If you want to change the style of the link it is necessary to put the class of the desired style and the font-notosans class, to force the font family to be the same as the remaining links. If you want to open the content in another tab, place target = "_ blank".

Tasks Front End

DMW-1361 DMW-1478

Tasks Back End

NA

Tasks details

NA

Views Path

Component Variations

Default


Platform Pages
Overview
How to use

Check "how to implement" section.

Undeveloped Options

NA

Example page

Figma Link