Top bar

wu-topbar is an application header: a brand, a nav of links and an end group. It stays in the flow; pinned makes it stick to the top.

On a narrow screen the nav gives up its room first and scrolls sideways, then a long brand name truncates. The end group keeps its size, so keep it short; the bar never makes the page scroll sideways.

Class or attribute	Effect
`wu-topbar`	Root, on `<header>`. Surface bar with a bottom border
`wu-topbar-brand`	Part. Brand link or name
`wu-topbar-nav`	Part, on the `<ul>` inside a `<nav>`, or on the `<nav>` itself. Takes the free space and scrolls sideways when it runs out of room
`wu-topbar-link`	Part. Nav link with an inset focus ring
An `<svg>` in a link	App icon, sized to the text
`aria-current="page"` on a link	Current page, brand underline
`wu-topbar-end`	Part. Group pushed to the end
`pinned`	Sticks to the top; adds a shadow once stuck
`wu-topbar-progress`	Part. A line filled by page scroll

Default

<header class="wu-topbar">
  <a class="wu-topbar-brand" href="#">Northwind</a>
  <nav aria-label="Main">
    <ul class="wu-topbar-nav">
      <li><a class="wu-topbar-link" href="#" aria-current="page">Dashboard</a></li>
      <li><a class="wu-topbar-link" href="#">Projects</a></li>
      <li><a class="wu-topbar-link" href="#">Reports</a></li>
    </ul>
  </nav>
  <div class="wu-topbar-end">
    <button class="wu-btn sm" type="button">Help</button>
    <span class="wu-avatar sm blue" role="img" aria-label="Ana Lopez">AL</span>
  </div>
</header>

Nav on the nav element

wu-topbar-nav also works directly on a <nav> of links.

<header class="wu-topbar">
  <span class="wu-topbar-brand">Admin</span>
  <nav class="wu-topbar-nav" aria-label="Main">
    <a class="wu-topbar-link" href="#">Users</a>
    <a class="wu-topbar-link" href="#" aria-current="page">Billing</a>
    <a class="wu-topbar-link" href="#">Settings</a>
  </nav>
</header>

Pinned with progress

pinned sticks the bar to the top of its scroll container. wu-topbar-progress is decoration, so mark it aria-hidden="true"; it fills as the page scrolls and stays hidden when reduced motion is set.

<header class="wu-topbar pinned">
  <a class="wu-topbar-brand" href="#">Northwind</a>
  <div class="wu-topbar-end">
    <button class="wu-btn brand sm" type="button">Sign in</button>
  </div>
  <div class="wu-topbar-progress" aria-hidden="true"></div>
</header>

Right to left

The brand sits at the right, the nav follows it, and the end group moves to the left.

<header class="wu-topbar">
  <a class="wu-topbar-brand" href="#">النور</a>
  <nav class="wu-topbar-nav" aria-label="الرئيسية">
    <a class="wu-topbar-link" href="#" aria-current="page">لوحة التحكم</a>
    <a class="wu-topbar-link" href="#">التقارير</a>
  </nav>
  <div class="wu-topbar-end">
    <button class="wu-btn sm" type="button">مساعدة</button>
  </div>
</header>

Load only the top bar

@use "@wovenui/components/topbar";

The top bar needs no other component. The examples above also use the button and the avatar.