SubNav Component

About SubNav

The SubNav component provides a sticky sub-navigation bar that sits below the main header. It features a glassmorphism effect when scrolled, horizontal scrolling on mobile, and supports both simple and grouped link styles.

Simple Variant

Use the simple variant for a flat list of navigation links:

<SubNav variant="simple">
  <a href="/docs/" class="active">Getting Started</a>
  <a href="/docs/configuration/">Configuration</a>
  <a href="/docs/components/">Components</a>
</SubNav>

Grouped Variant

Use the grouped variant for links with color-coded group indicators:

<SubNav variant="grouped">
  <div class="sub-nav-group sub-nav-group-primary">
    <a href="/features/">Overview</a>
    <a href="/features/scrolling/">Smooth Scrolling</a>
  </div>
  <div class="sub-nav-group sub-nav-group-secondary">
    <a href="/features/components/subnav/">SubNav</a>
  </div>
</SubNav>

Available Group Styles

Up to 6 color-coded groups are available:

Group colors are configurable via CSS variables in global.css. Override --group-primary-start, --group-primary-end, etc. to customize.

Need more than 6 groups? Add custom CSS variables and styles following the existing pattern in global.css and SubNav.astro.

Features

• Sticky positioning - Stays visible as you scroll
• Glassmorphism - Frosted glass effect when stuck
• Mobile scroll - Horizontal scrolling on small screens
• Active states - Highlight current page with class="active"