Quick nav
The quick nav component allows navigation inside a page. It renders links according to the headings of the content structure, enabling users to jump to specific sections. The navigation label is based on the section title or a combination of section and sub-section titles (for nested links). If a heading includes spaces, they are replaced with hyphens (-) in the URL.
Quick nav is used to improve in-page navigation by listing content sections and subsections based on the heading hierarchy. This helps users understand the page structure at a glance and jump directly to the content they're interested in. It's especially useful on documentation pages, dashboards and long-form content.
- 1.Divider: a thin vertical line that visually separates the quick nav from the main content area. Its purpose is to create a clear boundary between navigation and content, improving readability and layout organization.
- 2.Title (Optional): a short descriptive title such as "Contents" or "On this page" that provides context for the navigation list.
- 3.Links: the main navigation items, each representing a primary section on the page. These are generated from top-level headings and are clickable.
- 4.Sublinks (Optional): secondary navigation items, generated from subheadings nested under the main sections. These allow finer-grain navigation within a specific topic.
- Provide a clear title: use a meaningful title like "On this page" to help users understand the context of the links.
- Show structure clearly: use quick nav to mirror the hierarchy of your content, making it easier to follow and navigate. Keep headings descriptive and consistent so link labels are meaningful when rendered.
- Avoid clutter: avoid rendering quick nav on pages with very little content; it can feel redundant.
- Maintain visual separation from main content: always allow sufficient spacing between the quick nav and the main content area. This helps users visually distinguish navigation from content and avoids overwhelming the layout. Use padding or margins to ensure the quick nav doesn't feel cramped or interfere with readability, especially on larger screens or dense layouts.
- Pair with other navigational tools: combine quick nav with tabs or breadcrumbs for a comprehensive navigation experience across and within pages.