navigation

Sidebar

Grouped links beside the content, for apps and documentation with many pages.

CSS onlyPlain classes; no JavaScript in any stack.

Usage

Groups of links with a heading each, in a <nav>. The current page has aria-current="page".

<nav class="ca-sidebar w-full max-w-60" aria-label="Settings">
  <div class="ca-sidebar__group">
    <p class="ca-sidebar__heading" id="settings-school">School</p>
    <ul class="ca-sidebar__list" aria-labelledby="settings-school">
      <li><a class="ca-sidebar__link" href="#profile" aria-current="page">Profile</a></li>
      <li><a class="ca-sidebar__link" href="#instructors">Instructors</a></li>
      <li><a class="ca-sidebar__link" href="#cars">Cars</a></li>
    </ul>
  </div>
  <div class="ca-sidebar__group">
    <p class="ca-sidebar__heading" id="settings-billing">Billing</p>
    <ul class="ca-sidebar__list" aria-labelledby="settings-billing">
      <li><a class="ca-sidebar__link" href="#prices">Prices</a></li>
      <li><a class="ca-sidebar__link" href="#payouts">Payouts</a></li>
    </ul>
  </div>
</nav>

Examples

Guidance and accessibility

When to use

Use a sidebar when there are more places to go than fit in a navbar, such as the settings of an app or the pages of documentation.
Group links under short headings, in the order people use them.
On small screens, put the sidebar behind a button, for example in a popover or a dialog.

Accessibility

Give the <nav> an aria-label that says what it covers, such as “Settings”.
Connect each list to its heading with aria-labelledby, so screen readers read the group name.
Mark the current page with aria-current="page"; the skin shows it with a fill and bold text, not by color alone.

Classes

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

Classes of the sidebar component
Class	Kind	Use it for
`ca-sidebar`	Component	The `<nav>` that stacks the groups.
`ca-sidebar__group`	Part	One group of links with its heading.
`ca-sidebar__heading`	Part	The name of a group.
`ca-sidebar__subheading`	Part	None
`ca-sidebar__list`	Part	The `<ul>` of links in a group.
`ca-sidebar__link`	Part	One link; the current page is filled and bold.

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