Astroria
Copied to clipboard!

Navigation Components

1 min read

Navigation Components

22 components for site navigation.

Main documentation navigation. Groups docs by directory with collapsible sections.

Features:

  • Auto-groups by first directory segment
  • Sidebar labels and badges from frontmatter
  • Active state highlighting
  • Integrated search

Live example: Left side of this page

TableOfContents

Right-side table of contents with scroll highlighting.

Features:

  • Auto-extracts headings from content
  • Highlights current section on scroll
  • Smooth scroll navigation

Live example: Right side of this page

Navigation path showing current location.

Features:

  • Auto-generated from URL path
  • Home link included
  • Accessible markup

Live example: Top of doc pages

Pagination

Previous/Next navigation between docs.

Features:

  • Auto-detects adjacent pages
  • Shows page titles
  • Arrow indicators

Live example: Bottom of doc pages

Top navigation bar for splash/landing pages.

Features:

  • Sticky positioning
  • Logo + nav links
  • Mobile responsive
  • Theme toggle

Live example: Homepage header

MobileMenu

Hamburger menu for mobile navigation.

Features:

  • Slide-out drawer
  • Full navigation access
  • Touch-friendly

Visible on mobile devices

Full-text search with FlexSearch.

Features:

  • Keyboard shortcut (⌘K / Ctrl+K)
  • Instant results
  • Highlighted matches
  • Recent searches

Tip

Press ⌘K or Ctrl+K anywhere to open search.

VersionSelector

Git branch-based version switching.

Features:

  • Dropdown menu
  • Branch-based versions
  • Current version indicator

Component: @components/nav/VersionSelector.astro

LanguageSelector

i18n language picker.

Features:

  • 6 languages configured
  • Dropdown selection
  • Flag/label display

Component: @components/nav/LanguageSelector.astro

SkipToContent

Accessibility skip link for keyboard users.

Features:

  • Hidden until focused
  • Skips to main content
  • WCAG compliant

Press Tab on page load to reveal

ScrollSpy

Highlight current section in TOC based on scroll position.

Heading anchor links with copy-to-clipboard.

Example Heading

Hover over the heading above to see the anchor link icon.

Show related documentation articles.

NextPrev

Previous/Next navigation between docs with keyboard shortcuts (Alt + Arrow keys).

Note: This component automatically detects previous and next pages based on sidebar order.

Individual breadcrumb item.

Collapsible navigation group for sidebar.

EditOnGitHub

Link to edit page on GitHub.

Edit this page

BackToTop

Scroll-to-top button that appears when scrolling down.

Tip

Scroll down on this page to see the Back to Top button appear.

QuickNav

Quick navigation menu for sections.

Page title with metadata.

Updated 5 min read

Navigation Components

Complete guide to all navigation components in Astroria Docs

Last updated:

ExpandAllCollapse

Toggle to expand/collapse all accordions.

|

Info

Use with accordion groups to control all items at once.

SearchSuggestions

Search autocomplete suggestions.