Navigation¶
The theme provides two completely independent navigation menus.
Sidebar navigation¶
Driven by MkDocs' built-in nav: key. MkDocs processes this list, resolves URLs, and marks the active page. See Sidebar for full details.
Top navigation bar¶
A horizontal bar that sticks below the header. It is configured via extra.navmenu and is completely independent from nav:.
extra:
navmenu:
- title: Home
url: /
- title: Docs
children:
- title: Installation
url: /getting-started/install/
- title: Configuration
url: /getting-started/config/
- title: API
url: /api/
Unlimited nesting¶
Dropdowns can be nested as deeply as needed. Depth-1 dropdowns open downward from the bar. Depth-2 and deeper dropdowns fly out to the right (on desktop):
navmenu:
- title: Products
children:
- title: Open Source
children:
- title: Theme
children:
- title: Dark version
url: /products/theme/dark/
- title: Light version
url: /products/theme/light/
Desktop vs mobile behaviour¶
On desktop (hover-capable devices), dropdowns open on hover with a 120 ms delay on close to avoid accidental dismissal. On mobile, they open on tap and stack vertically with a max-height animation.
Active state¶
The top nav does not use MkDocs' nav processing. Active state is detected by JavaScript comparing each link's href against window.location.pathname. Both exact matches and prefix matches (for nested paths) are highlighted.
URL format¶
Write URLs exactly as they will appear in the deployed site. With MkDocs' default use_directory_urls: true, page URLs end with a trailing slash:
# ✅ Correct
- title: Installation
url: /getting-started/install/
# ❌ Will not match
- title: Installation
url: /getting-started/install.html
Header breadcrumb¶
The header bar shows the current page's parent section and title as a breadcrumb. It is automatic — no configuration needed.
Previous / Next navigation¶
At the bottom of each article, Previous and Next buttons link to adjacent pages in the sidebar nav order. Titles are truncated with an ellipsis if they exceed the available space.