Navigation

Navigation should make the product structure obvious. Keep top-level links small and predictable, then let the sidebar handle section depth.

Top navigation#

Use top navigation for large destinations:

• Docs
• Blog
• Changelog
• GitHub

Active links#

Top navigation should show the active section without competing with the page content.

Sidebar navigation#

Use sidebar navigation for docs sections and nested pages. Active states should show the current page without adding unnecessary decoration.

Long sidebars#

When a docs site grows, the sidebar should keep the active page in view after navigation. This makes deep sections feel intentional instead of lost.

Search behavior#

Search helps long docs sidebars stay usable. It should filter page labels without removing the basic structure of the navigation.

Keyboard access#

Give search a predictable shortcut when the docs are used repeatedly. Keyboard access is especially useful for internal tools and developer documentation.

Empty state#

Show a clear empty state when no page matches the query. A blank sidebar feels broken even when the filter is working correctly.

Active state review#

Navigation should always answer where the reader is. Active states need to work in top navigation, sidebar items, mobile menus, and table of contents links.

Current page signal#

Keep the current page signal visible but quiet. Strong active states are useful, but decorative markers can become distracting in long sidebars.