Navigation chrome

These classes provide presentation for navigation titles, icons, and search triggers. They do not create a navigation model or router. Use semantic links/nav landmarks and add Markup Refine behavior hooks only where enhancement is needed.

Brand and title

mr-nav-brand is a prominent brand block. mr-nav-title is a compact title intended for top bars such as the Application Shell.

<header class="mr-nav-brand">
  <a href="/">Project name</a>
</header>

Markup Refine

Navigation icon

mr-nav-icon provides a square icon treatment. Current-page state should use semantic aria-current="page", not a selected presentation class.

<nav class="mr-cluster" aria-label="Primary">
  <a class="mr-nav-icon" href="/dashboard" aria-label="Dashboard">
    <svg aria-hidden="true" viewBox="0 0 24 24" width="20" height="20">
      <path d="M4 4h6v6H4zm10 0h6v6h-6zM4 14h6v6H4zm10 0h6v6h-6z" />
    </svg>
  </a>
</nav>

Current-URL autoselection

<nav class="mr-nav-tabs" data-mr-nav-tabs-autoselect aria-label="Section navigation">
  <a href="/docs/">Docs</a>
  <a href="/docs/api/">API</a>
  <a href="/docs/examples/">Examples</a>
</nav>

data-mr-nav-tabs-autoselect compares same-page URLs after normalizing a trailing slash and writes aria-current="page" only when exactly one link matches. Query strings and fragments do not define a separate current page.

For interactive single-page tab panels, use the separateNavigation tabs behavior, which usesaria-selected rather than aria-current.

Search trigger presentation

<button
  type="button"
  class="mr-search-trigger"
  data-mr-search
  data-mr-search-static-url="/search-index.json"
>
  <span class="mr-search-trigger__label">Search</span>
</button>

mr-search-trigger and mr-search-trigger__label are presentation.data-mr-search plus exactly one static/dynamic URL hook enables Search Tool behavior. See Search Tool for the full contract.

Application Shell sidebar helpers

mr-shell__sidebar-titlebar, mr-shell__sidebar-body, andmr-shell__back are optional presentation helpers for content placed in an Application Shell sidebar/drawer. They do not add behavior on their own.