Primer 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.
</code>
There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons.
</code>
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.
</code>
When you need to toggle between different views, consider using a tabnav. It’ll given you a left-aligned horizontal row of… tabs!
</code>
Use .right to align additional elements in the .tabnav:
</code>
Additional bits of text and links can be styled for optimal placement with .tabnav-extra:
</code>
</code>
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.
</code>
Coming soon…