Navigation
Primary navigation
Primary navigation is used to navigate between the core sections of NationBuilder. It is a left aligned, vertical navigation that can be collapsed or expanded. It is expanded by default, but can be collapsed to allow for more screen real estate. When collapsed, the primary navigation will expand upon hover.
|
State:
|
|
|
Expanded
|
Default state
|
|
Collapsed
|
Initiated when a user clicks the collapse icon and it will automatically expand on hover
|
primary_nav
Sub navigation
Sub navigation is used to move among related sections within the same context. There are 4 levels of sub navigation with a distinct visual style that gradually nest deeper within related sections as needed.
Subnav: Level 1
Located at the bottom of the page header, used to navigate within a top level section of the control panel.
subnav--level-1
Subnav: Level 2
Located at the top of a content body background, used to navigate within subnav level 1.
subnav_2
Subnav: Level 3
Often located directly beneath subnav level 2, used to navigate within subnav level 2.
subnav_3
Subnav: Level 4
Often located within the content of subnav level 3, used to navigate around a specific component.
subnav_4
Best practices
Accessibility
- Code your navigation using link tags.
- Put your links within an unordered list structure so that a screen reader will read out how many things are in the list to give visually impaired people the most information possible about the contents of the navigation.
- Use the semantic
<nav> tag around your unordered list and links with an ARIA role='navigation' attribute.
- Optionally, attach an
aria-label attribute to your navigation to give users of assistive technology as much information as possible (especially if there are multiple navigations on your site).
Breadcrumbs
Breadcrumbs indicate the current page’s location within a navigational hierarchy.
breadcrumbs
Best practices
Accessibility
- Since breadcrumbs provide navigation, it’s a good idea to add a meaningful label such as
aria-label="breadcrumb" to describe the type of navigation provided in the nav element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.