Navbar

Responsive navigation bars, dark/primary variants, and generated top navigation contracts.

Each example uses Sass v2 classes directly while the page still renders through the normal Header/Body/Footer service_3_modern section.

Component

Dark navbar

Production topnav shell with brand, links, active item, and CTA.

Component
Dark navbar html 
<nav class="antsand-navbar antsand-navbar-dark">
  <a class="antsand-navbar-brand">ANTSAND</a>
  <div class="antsand-navbar-nav">
    <a class="antsand-navbar-item active">Docs</a>
  </div>
</nav>

Primary navbar

Use primary color for product or app navigation.

Component
Primary navbar html 
<nav class="antsand-navbar antsand-navbar-primary">...</nav>

Mobile toggle contract

The toggle button and nav list are the stable JS hooks for responsive navigation.

Component
Mobile toggle contract html 
<button class="antsand-navbar-toggle" data-antsand-toggle="navbar">
  <span class="antsand-navbar-toggle-icon"><span></span><span></span><span></span></span>
</button>

Data-first component docs

The live examples and code samples are stored in databoard.menu, mapped into api_data, and rendered by the shared H/B/F template.

Data mapping json 
{"api_data": [["api_data"], ["databoard", "menu", "stylesdoc_component_navbar"]]}

ANTSAND

AI-readable CSS, Header/Body/Footer contracts, and generated-site hardening across the ANTSAND ecosystem.

ANTSAND Styles v2 - Open Source CSS Framework