Navigation

The app chrome uses a glass .ziom-nav bar (rendered by layouts/_navigation) with responsive mobile behavior, dropdowns, and a theme toggle. Below are the building-block pieces.

Nav Links

Dashboard Buildings Leads

HTML

<a href="#" class="ziom-nav-link active">Dashboard</a>
<a href="#" class="ziom-nav-link">Buildings</a>
<a href="#" class="ziom-nav-link">Leads</a>

Dropdown

Add the open class to .ziom-nav-dropdown to reveal the menu.

HTML

<div class="ziom-nav-dropdown open" style="position: relative;">
  <button class="ziom-nav-dropdown-toggle">Account</button>
  <div class="ziom-nav-dropdown-menu">
    <a href="#" class="ziom-nav-dropdown-item">Profile</a>
    <a href="#" class="ziom-nav-dropdown-item">Settings</a>
    <div class="ziom-nav-dropdown-divider"></div>
    <a href="#" class="ziom-nav-dropdown-item">Sign out</a>
  </div>
</div>

Theme Toggle

Wired to the theme Stimulus controller, which persists the preference to localStorage and falls back to the OS setting. The toggle in this page's header uses exactly this markup — try it.

HTML

<div class="ziom-theme-options">
  <button class="ziom-theme-btn active" data-theme="light" title="Light"><i class="ph ph-sun"></i></button>
  <button class="ziom-theme-btn" data-theme="dark" title="Dark"><i class="ph ph-moon"></i></button>
  <button class="ziom-theme-btn" data-theme="system" title="System"><i class="ph ph-desktop"></i></button>
</div>