---
title: Navigation
path: components/navigation
status: Stable
source: 'https://github.com/primer/css/tree/main/src/navigation'
bundle: 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.
## Menu
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`.
```html live title="Menu"
```
There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons.
```html live
```
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.
```html live title="Menu with heading"
```
## 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.
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
```html live title="UnderlineNav"
```
Use `.UnderlineNav-actions` to place another element, such as a button, to the opposite side of the navigation items.
```html live title="UnderlineNav-actions"
```
Use `.UnderlineNav--right` to right align the navigation.
```html live title="UnderlineNav--right"
```
`.UnderlineNav--right` also works with when used with `.UnderlineNav-actions`.
```html live title="UnderlineNav--right with actions"
```
`.Counters` and `.octicons` can be used with navigation items. Use `.UnderlineNav-octicon` to add color and hover styles.
```html live
```
Use `.UnderlineNav--full` in combination with container styles and `.UnderlineNav-container` to make navigation fill the width of the container.
```html live title="UnderlineNav--full"
```
## 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](../objects/grid) classes or an inline `width` style for sizing, and [flexbox utilities](../utilities/flexbox) 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"`.
```html live
```
Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed.
```html live
```
The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.
```html live
```
Or also appear nested, as a sub navigation. Use margin/padding utility classes to add indentation.
```html live
```
## Tabnav
When you need to toggle between different views, consider using a tabnav. It'll give you a left-aligned horizontal row of... tabs!
```html live title="tabnav"
```
Tabs can also contain icons and counters.
```html live
```
Use `.float-right` to align additional elements in the `.tabnav`:
```html live title="tabnav with buttons"
```
## 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.
```html live title="filter-list"
```
## Sub navigation
`.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.
```html live title="subnav"
```
You can have `subnav-search` in the subnav bar.
```html live
```
You can also use a `subnav-search-context` to display search help in a select menu.
```html live