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
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.
.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:
aria-selected="true"if it's a button
aria-current="page"if it's a link
.UnderlineNav-actions to place another element, such as a button, to the opposite side of the navigation items.
.UnderlineNav--right to right align the navigation.
.UnderlineNav--right also works with when used with
.octicons can be used with navigation items. Use
.UnderlineNav-octicon to add color and hover styles.
.UnderlineNav--full in combination with container styles and
.UnderlineNav-container to make navigation fill the width of the container.
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.
aria-current="page"to show a link as selected. Selected button elements in tab-like UIs should instead have
Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed.
.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.
When you need to toggle between different views, consider using a tabnav. It'll give you a left-aligned horizontal row of... tabs!
Tabs can also contain icons and counters.
.float-right to align additional elements in the
Additional bits of text and links can be styled for optimal placement with
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.