Navigation

Primer CSS comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.

The menu is a vertical list of navigational links. A menu's width and placement must be set by you. If you like, just use our grid columns as a parent. Otherwise, apply a custom width.

There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons.

You can also add optional headings to a menu. Feel free to use nearly any semantic element with the .menu-heading class, including inline elements, headings, and more.

Underline nav

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.

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.

Side Nav

The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, Side Nav elements have no default width or positioning. We suggest using column grid classes or an inline width style for sizing, and flexbox utilities for positioning alongside content.

  • You can use a border if the parent element doesn't have it already.
  • Add aria-current="page" to show a link as selected. Selected button elements in tab-like UIs should instead have aria-selected="true".

Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed.

The .SideNav-subItem is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.

Or also appear nested, as a sub navigation. Use margin/padding utility classes to add indentation.

Tabnav

When you need to toggle between different views, consider using a tabnav. It'll give you a left-aligned horizontal row of... tabs!

Use .float-right to align additional elements in the .tabnav:

Additional bits of text and links can be styled for optimal placement with .tabnav-extra:

Filter list

A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.

.subnav is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy.

You can have subnav-search in the subnav bar.

You can also use a subnav-search-context to display search help in a select menu.

Edit this page on GitHub
2 contributorssimuraicolebemis
Last edited by simurai on August 26, 2019