Barbajoe CSS

Layout and navigation

Application shells, header compositions, and navigation that wraps with its content.

Category dropdown navigation

This page’s header is a working example: Guides, Components, and Examples group ordinary links into click-to-open panels. Use Tab to move through controls and links, Enter or Space to open a category, and Escape to close it and return to its button. Clicking outside closes the panel. The current page and its category are underlined.

<header class="site-header">
  <a class="site-header-brand" href="./index.html">Barbajoe CSS</a>
  <nav aria-label="Main">
    <ul class="site-header-links">
      <li>
        <button type="button" popovertarget="guide-pages">Guides</button>
        <ul class="site-header-menu" id="guide-pages" popover="auto" aria-label="Guides">
          <li><a href="./getting-started.html">Getting started</a></li>
          <li><a href="./headers.html" aria-current="page">Layout and navigation</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

The reusable .site-header-menu style is introduced in CSS library 0.5.0. This preview is available before npm publication. Keep each button’s popovertarget matched to a unique menu ID. Native popover="auto" handles toggling, one-open-at-a-time behavior, and light dismissal without JavaScript. These are ordinary navigation lists, not ARIA menu widgets.

CSS positions panels below their buttons when space permits, with a viewport-aligned fallback for narrow or short screens. Browsers without anchor positioning get centered panels; browsers without popovers get visible links. The documentation’s optional script closes a panel when focus leaves its list item. Consumer applications own that extra behavior, destinations, and current-page state; the package ships CSS only.

See the complete markup, compatibility, and accessibility guidance.

Application shell

An .app-shell has a direct main and independently optional direct header and footer regions. This documentation page demonstrates the full shell.

<div class="app-shell">
  <header class="site-header">...</header>
  <main id="main-content">...</main>
  <footer>...</footer>
</div>

Use meaningful landmarks and headings, a skip link to main, and aria-current="page" for the current destination. Applications supply navigation destinations and action behavior. See the shell markup and header options and compatibility guidance.

Header compositions

Accessibility: Use a named navigation landmark when multiple navigation regions need distinguishing, meaningful link destinations, and aria-current="page" for the current page. Actions are native buttons with explicit types; keep keyboard focus visible. aria-disabled does not prevent keyboard activation of links: applications must handle it. APG navigation-landmark guidance.

Navigation shares a row with the brand when it fits, then wraps at the right. Links and action buttons have the same padded targets. These controls demonstrate local state only.

Brand and navigation

Our List

Manage selected. Try the links or Update now.

Brand only

Barbajoe

The optional site-header-brand class keeps a link, strong text or an appropriate heading visually consistent. Choose the element for its meaning.

First selected using legacy .active markup.

Long labels and a heading as brand

Our household shopping list

Manage shared shopping lists selected.