css/docs/nav.md

layout	title
page	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 %}

Account Profile Emails Notifications {% endexample %}

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

{% example html %}

Account Profile Emails 3 Notifications {% endexample %}

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

{% example html %}

Menu heading Account Profile Emails Notifications {% 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 %}

Foo tab Bar tab

{% endexample %}

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

{% example html %}

Button Foo Tab Bar Tab

{% endexample %}

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

{% example html %}

Tabnav widget text here.

Foo Tab Bar Tab

{% endexample %}

{% example html %}

Tabnav extra link Tabnav extra link

Foo Tab Bar Tab

{% 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 %}

• 21 First filter
• 3 Second filter
• Third filter

{% endexample %}

Breadcrumb

Coming soon...