---
layout: page
title: Navigation
---
Primer comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## 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`.
{% example html %}
{% endexample %}
There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons.
{% example html %}
{% endexample %}
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.
{% example html %}
{% endexample %}
## Tabnav
When you need to toggle between different views, consider using a tabnav. It'll given you a left-aligned horizontal row of... tabs!
{% example html %}
{% endexample %}
Use `.right` to align additional elements in the `.tabnav`:
{% example html %}
{% endexample %}
Additional bits of text and links can be styled for optimal placement with `.tabnav-extra`:
{% example html %}
{% endexample %}
{% example html %}
{% endexample %}
## 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.
{% example html %}
{% endexample %}
## Breadcrumb
*Coming soon...*