`navbar` element

A responsive site header: brand and actions always visible, menu links that fold behind a menu button on small screens, and dropdowns nested to any depth.

Renders

<nav class="iwc-navbar"> with a toggle button, a link list and <details>-based dropdowns

Required

Nothing beyond type; normally elements (brand, account) and items (menu).

Native apps

Web, and server-driven native apps

Syntax

navbar element

{ "type": "navbar" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Property	Type	Default	Description
`items`	`array of item`	—
`elements`	`array of element`	—
`opensOn`	`"click""hover"`	`click`	dropdown/navbar: how menus open (hover falls back to click on touch screens)
`collapse`	`"links""all"`	`links`	navbar: what folds behind the menu button on small screens (default links)
`collapseAt`	`"mobile""tablet"`	`mobile`	navbar: the breakpoint below which it folds (default mobile)

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Events & actions

Escape or a click outside closes an open dropdown. Hover menus fall back to click on touch screens.

Example

navbar example

{
  "type": "navbar",
  "className": "site-header",
  "opensOn": "hover",
  "collapseAt": "tablet",
  "elements": [
    { "type": "link", "label": "Lumen & Oak", "target": "/", "className": "brand" }
  ],
  "items": [
    {
      "label": "Shop",
      "items": [
        { "label": "All products", "target": "/products" },
        { "label": "Lighting", "target": "/products?category=lighting" }
      ]
    },
    { "label": "About", "target": "/about" }
  ]
}

elements are always visible. items are links; an item with its own items becomes a dropdown. collapse: "all" folds every element except the first (the brand) as well.

Expected output

The HTML IWC rendered for the example above (inside the page's content wrapper). Class names such as i807b63fc are generated per element for its scoped CSS.

Rendered HTML

<div class="iwc-page ipage" id="iwc-content">
  <nav class="iwc-navbar i81cc1bf9 site-header" data-collapse-at="tablet" data-opens="hover">
    <button type="button" class="iwc-navbar-toggle" data-iwc-action="navbar" aria-label="Menu" aria-expanded="false">
      <svg class="iwc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
    </button>
    <a class="iwc-link i5e87d251 brand" href="/">Lumen &amp; Oak</a>
    <ul class="iwc-navbar-links">
      <li>
        <details class="iwc-dropdown iwc-submenu" data-opens="hover">
          <summary>
            Shop ▾
          </summary>
          <div class="iwc-dropdown-menu">
            <a href="/products">All products</a><a href="/products?category=lighting">Lighting</a>
          </div>
        </details>
      </li>
      <li>
        <a href="/about">About</a>
      </li>
    </ul>
  </nav>
</div>

Data, conditions & styling

Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.