Skip to content


  • Stable
  • Not reviewed for accessibility

Use .UnderlineNav to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page. This component comes with variations to accommodate icons, containers and other content.

To add a selected state to an item, use:

  • role="tab" and aria-selected="true" if it's a button
  • aria-current="page" if it's a link

Use .UnderlineNav-actions to place another element, such as a button, to the opposite side of the navigation items.

Use .UnderlineNav--right to right align the navigation.

.UnderlineNav--right also works with when used with .UnderlineNav-actions.

.Counters and .octicons can be used with navigation items. Use .UnderlineNav-octicon to add color and hover styles.

Use .UnderlineNav--full in combination with container styles and .UnderlineNav-container to make navigation fill the width of the container.

Edit this page on GitHub
1 contributorsimurai
Last edited by simurai on December 16, 2022