Navigation is the backbone of the Alius user experience. Given the breadth of content — from documentation and product pages to community resources and configuration tools — a clear, consistent navigation system is essential.

Top Navigation

The global top navigation bar provides access to major sections of the platform:

  • Logo (links to homepage)
  • Primary section links (Products, Docs, Community, Resources)
  • Search trigger
  • Version switch (for documentation and software)
  • Language switch (for multilingual content)
  • User account or settings (when applicable)

Docs Sidebar

The left sidebar in the documentation center organizes content hierarchically:

  • Collapsible section groups
  • Nested page links reflecting content structure
  • Active page indicator with visual highlight
  • Section labels that group related pages
  • Scrollable when content exceeds viewport height

Breadcrumbs show the user’s position within the content hierarchy:

  • Displayed above the main content area
  • Clickable segments for navigating to parent levels
  • Current page shown as non-clickable text
  • Truncated on mobile with key ancestor preserved

Page TOC (Table of Contents)

The right-side TOC provides within-page navigation:

  • Automatically generated from page headings (H2, H3)
  • Highlights the currently visible section as the user scrolls
  • Clickable links that smooth-scroll to the target heading
  • Collapsed on screens with insufficient width

Mobile Drawer

On mobile devices, the sidebar converts to a slide-in drawer:

  • Triggered by a hamburger or menu icon in the top nav
  • Slides in from the left edge
  • Overlays the content with a semi-transparent backdrop
  • Contains the full sidebar navigation structure
  • Closeable by tapping the backdrop or a close button

Version Switch

For documentation that exists across multiple versions:

  • Dropdown or segmented control in the top nav or sidebar header
  • Clearly indicates the currently viewed version
  • Warns the user if they are viewing an outdated version
  • Maintains the current page path when switching versions (if the page exists in the target version)

Language Switch

For multilingual content:

  • Displayed in the top nav
  • Shows the current language
  • Lists available languages
  • Maintains the current page when switching languages (if the translation exists)

Global search provides quick access to any content:

  • Accessible from the top nav via a search icon or keyboard shortcut
  • Opens a search modal or overlay
  • Searches across documentation, products, and resources
  • Shows results categorized by type
  • Highlights matched text in results
  • Current position is always clear — the user should never have to guess where they are in the content hierarchy
  • User knows which level they are on — breadcrumbs, sidebar highlights, and TOC indicators all reinforce position
  • Documentation supports beginner to advanced paths — navigation should not assume expert knowledge; entry points for beginners should be discoverable
  • Consistent behavior across pages — navigation components function identically regardless of the current section
  • Minimal clicks to any destination — important pages should be reachable within 2-3 clicks from any other page