Skip to content
7 Seventh UI VanillaJS Runtime playground

Component runtime

Navigation

Navigation enhances Seventh UI navigation markup with mobile drawer disclosure, trigger state, Escape and outside dismissal, focus restoration, submenu disclosure helpers, and cleanup.

Playground

Open the drawer, toggle the Cameras disclosure, close with Escape, outside pointer, or the drawer close button.

Hooks

Desktop navigation links remain static. Runtime behavior activates only where drawer and disclosure hooks are present.

Hook Role
data-sui-navigation Navigation root initialized by the component registry.
data-sui-navigation-drawer Drawer surface whose hidden state and data-sui-state are synchronized.
data-sui-trigger="navigation" Button that toggles the target drawer and receives aria-expanded.
data-sui-target Drawer or disclosure target id or selector.
data-sui-navigation-disclosure Submenu disclosure control that synchronizes expanded state and target visibility.

Events

Before events are cancellable. Close events include the reason: trigger, escape, or outside.

sui:navigation:before-open
sui:navigation:open
sui:navigation:before-close
sui:navigation:close

Markup

<section data-sui-navigation>
  <button data-sui-trigger="navigation" data-sui-target="mobile-nav">
    Open navigation
  </button>

  <nav class="sui-navigation" id="mobile-nav" data-sui-navigation-drawer hidden>
    <button data-sui-navigation-disclosure data-sui-target="nav-group">
      Cameras
    </button>
    <div id="nav-group" hidden>
      <a href="/live">Live view</a>
    </div>
  </nav>
</section>