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.
Initiated when a user clicks the collapse icon and it will automatically expand on hover
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 2
Located at the top of a content body background, used to navigate within subnav level 1.
Subnav: Level 3
Often located directly beneath subnav level 2, used to navigate within subnav level 2.
Subnav: Level 4
Often located within the content of subnav level 3, used to navigate around a specific component.
- 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
- 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 indicate the current page’s location within a navigational hierarchy.
- 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.