navigation

Navbar

The bar at the top of a site or app with the brand, the main links and a few actions.

Native behaviorUses built-in HTML behavior, so you write no script.

Usage

The links sit in a [popover] menu. At 40rem and wider they show in the bar; narrower, the menu button opens them. Resize the window to see both.

<header class="ca-navbar w-full">
  <a class="ca-navbar__brand" href="#home">Drive School</a>
  <nav aria-label="Main">
    <div class="ca-navbar__menu" id="main-menu" popover>
      <a class="ca-navbar__link" href="#lessons" aria-current="page">Lessons</a>
      <a class="ca-navbar__link" href="#students">Students</a>
      <a class="ca-navbar__link" href="#invoices">Invoices</a>
    </div>
  </nav>
  <div class="ca-navbar__actions">
    <a class="ca-button ca-button--primary ca-button--sm" href="#plan">Plan a lesson</a>
  </div>
  <button class="ca-navbar__toggle" type="button" popovertarget="main-menu" aria-label="Menu">
    <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16" /></svg>
  </button>
</header>

Examples

Guidance and accessibility

When to use

Use one navbar at the top of a site or app for the few places people go most.
Keep the main links to about five. More belong in a sidebar or a menu.
Keep actions short; on narrow screens they stay in the bar next to the menu button. A bar with several actions, such as the header of this site, uses ca-navbar--roomy, so the links fold away before they run out of room.

Accessibility

Put the menu in a <nav> with an aria-label, such as “Main”, so it is listed as a landmark.
The menu button needs a name, such as aria-label="Menu". Browsers tell screen readers whether the menu is open.
When narrow, the menu is a native popover: Escape and a click outside close it and focus returns to the button.
Mark the current page with aria-current="page".

Classes

Generated from the component contract. Parts use __, modifiers use --.

Classes of the navbar component
Class	Kind	Use it for
`ca-navbar`	Component	The bar; a size container, so it adapts to its own width, not the window's.
`ca-navbar__brand`	Part	Link to the home page with the name or logo.
`ca-navbar__menu`	Part	The `[popover]` with the main links; in the bar when wide, a panel when narrow.
`ca-navbar__link`	Part	One main link. Mark the current page with `aria-current="page"`.
`ca-navbar__actions`	Part	Buttons at the end of the bar, such as the main action or an account menu.
`ca-navbar__toggle`	Part	The menu button that opens the links when the bar is narrow.
`ca-navbar--roomy`	Layout	For a bar with more actions; the links move into the menu below 64rem instead of 40rem.

Skins

The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.

Base skin

Neutral grayscale starting point; product skins extend it and change what differs.

Calaca skin

The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.

Proof skin

Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.

Crossview skin

The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.

Framework notes

Link the prebuilt stylesheet of your skin next to your brand theme. No build step.

<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />

In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.

@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";

Same stylesheet as above; write the classes in className.

<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>

Search

Documentation