diff --git a/README.md b/README.md
index b69991e..b21ca51 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@ See [docs/layout.md](docs/layout.md) for each primitive and a compact "AI Layout
 
 ## Components
 
-Eight semantic components in [`src/components.css`](src/components.css), included in the main bundle: `.button`, `.field`, `.card`, `.badge`, `.alert`, `.panel`, `.table` and `.empty-state`, with a small set of variants (`.button-primary`, `.badge-success`, `.alert-danger`, …) and parts (`.card-header`, `.field-error`, …). They use only tokens, take their state from native attributes (`disabled`, `aria-busy="true"`, `aria-invalid="true"`) and need no JavaScript:
+Ten semantic components in [`src/components.css`](src/components.css), included in the main bundle: `.button`, `.field`, `.card`, `.badge`, `.alert`, `.panel`, `.table`, `.empty-state`, `.nav` and `.tabs`, with a small set of variants (`.button-primary`, `.badge-success`, `.alert-danger`, …) and parts (`.card-header`, `.field-error`, `.nav-link`, `.tabs-item`, …). They use only tokens, take their state from native attributes (`disabled`, `aria-busy="true"`, `aria-invalid="true"`, `aria-current="page"` on the current `.nav-link`, `aria-selected="true"` on the selected `.tabs-item`) and need no JavaScript:
 
 ```html
 <form class="card">
@@ -63,7 +63,7 @@ See [docs/components.md](docs/components.md) for each component's variants, comp
 
 ## AI contract
 
-[`synthcss.llm.md`](synthcss.llm.md) is the whole public vocabulary in one prompt-ready file of about 2,800 tokens: every token, layout primitive, component, part and variant, an intent table, composition rules, ten generation rules and valid and invalid examples. Paste it into a model's context. [`synthcss.ai.json`](synthcss.ai.json) is the same contract as structured data and the canonical source. Both state the SynthCSS version they describe; the schema is in [docs/ai-contract.md](docs/ai-contract.md).
+[`synthcss.llm.md`](synthcss.llm.md) is the whole public vocabulary in one prompt-ready file of about 3,500 tokens: every token, layout primitive, component, part and variant, an intent table, composition rules, ten generation rules and valid and invalid examples. Paste it into a model's context. [`synthcss.ai.json`](synthcss.ai.json) is the same contract as structured data and the canonical source. Both state the SynthCSS version they describe; the schema is in [docs/ai-contract.md](docs/ai-contract.md).
 
 **Any change to the public API (a class or token added, renamed or removed, or a new version) must update both contract files in the same pull request.** `npm test` runs `scripts/verify-ai-contract.mjs`, which fails when the contract and the CSS or `package.json` disagree.
 
diff --git a/docs/ai-contract.md b/docs/ai-contract.md
index cca1731..1c88943 100644
--- a/docs/ai-contract.md
+++ b/docs/ai-contract.md
@@ -7,7 +7,7 @@ window, with no need to crawl these docs or read `src/`.
 | File | For | Notes |
 | --- | --- | --- |
 | [`synthcss.ai.json`](../synthcss.ai.json) | Tools and agents that read structured data | The canonical, machine-readable contract. |
-| [`synthcss.llm.md`](../synthcss.llm.md) | Pasting into a prompt | A terse hand-written twin of the JSON, one line per item, about 2,800 tokens. |
+| [`synthcss.llm.md`](../synthcss.llm.md) | Pasting into a prompt | A terse hand-written twin of the JSON, one line per item, about 3,500 tokens. |
 
 Both are published next to the showcase on GitHub Pages
 (`<site>/synthcss.llm.md`, `<site>/synthcss.ai.json`) and are in every release tag.
diff --git a/docs/components.md b/docs/components.md
index 268b692..cbd0ac8 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -1,9 +1,10 @@
 # Components
 
-SynthCSS ships eight semantic components in [`src/components.css`](../src/components.css):
-`.button`, `.field`, `.card`, `.badge`, `.alert`, `.panel`, `.table` and `.empty-state`.
-Each one names a UI intent, so a model can map a request ("a delete button", "an
-error message", "a table of invoices") to one predictable class.
+SynthCSS ships ten semantic components in [`src/components.css`](../src/components.css):
+`.button`, `.field`, `.card`, `.badge`, `.alert`, `.panel`, `.table`, `.empty-state`,
+`.nav` and `.tabs`. Each one names a UI intent, so a model can map a request ("a delete
+button", "an error message", "a table of invoices", "a segmented filter") to one
+predictable class.
 
 They are part of the main bundle, together with the [design tokens](tokens.md) and the
 [layout primitives](layout.md):
@@ -22,12 +23,14 @@ How the components behave:
   (`.button-danger`) and `.component-part` for a part (`.card-header`). The one
   exception is the `.numeric` table cell.
 - **State from native attributes, not classes.** Use `disabled`,
-  `aria-disabled="true"`, `aria-busy="true"` and `aria-invalid="true"`. There is no
-  `.is-disabled`, `.button-loading` or `.field-invalid`.
+  `aria-disabled="true"`, `aria-busy="true"`, `aria-invalid="true"`,
+  `aria-current="page"` (current nav link) and `aria-selected="true"` (selected tab).
+  There is no `.is-disabled`, `.button-loading`, `.field-invalid`, `.is-active` or
+  `.tabs-item-selected`, and SynthCSS does not use `aria-pressed`.
 - **Native elements.** Put `.button` on `<button>` or `<a>`, `.table` on `<table>`, and
   native `input`, `select` and `textarea` inside `.field`. Native focus and keyboard
   behavior are kept.
-- **Focus.** Buttons, field controls and a focusable `.table-wrap` show a
+- **Focus.** Buttons, field controls, nav links, tabs and a focusable `.table-wrap` show a
   `:focus-visible` ring made of `--focus-width`, `--focus-color` and `--focus-offset`.
 - **Disabled.** Disabled buttons and controls are faded and show a `not-allowed`
   cursor. The variant color stays recognizable, so a disabled danger button still looks
@@ -54,14 +57,15 @@ Paste this table into a model's context together with the
 | Icon-only action | `.button button-icon` + `aria-label="…"` |
 | Smaller or larger button | add `.button-sm` / `.button-lg` |
 | Unavailable or in-progress action | `disabled` or `aria-disabled="true"`; `aria-busy="true"` |
-| Labeled input with help or error text | `.field` > `.field-label` + native control + `.field-help` / `.field-error` |
-| Invalid input | `aria-invalid="true"` on the control + `.field-error` text |
+| Labeled input with help or error text | `.field` > `.field-label` + native control + `.field-help` / `.field-error`; `aria-invalid="true"` on an invalid control |
 | Self-contained item (project, product, user) | `.card` with `.card-header`, `.card-body`, `.card-footer`, `.card-media`, `.card-actions` |
 | Short status label | `.badge` + `.badge-success` / `-warning` / `-danger` / `-info` |
 | Message or notification | `.alert` + `.alert-info` / `-success` / `-warning` / `-danger`, `role="status"` or `role="alert"` |
 | Flat group of secondary content | `.panel` with `.panel-header`, `.panel-body` |
 | Tabular data | `<table class="table">` inside `.table-wrap`; `.table-hover`, `.numeric` cells |
 | Nothing to show yet | `.empty-state` with heading, text and an optional action |
+| Navigation links | `<ul class="nav stack-sm">` or `nav cluster-sm` > `<a class="nav-link">`; `aria-current="page"` on the current one |
+| Tabs or segmented filter | `.tabs` + `role="tablist"` > `<button class="tabs-item" role="tab">`; `aria-selected="true"` / `"false"` |
 
 Rules: state comes from attributes, never from classes; put components on native
 elements; arrange them with `.stack`, `.cluster`, `.split` and `.grid`.
@@ -638,6 +642,159 @@ what to do next.
 - Using it for errors; use an `.alert`.
 - Leaving a list or table blank instead of showing an empty state.
 
+## `.nav`
+
+### Purpose
+
+A list of navigation links: main navigation, a settings menu, a section's sub-pages.
+`.nav` goes on the `<ul>` and only resets the list (no bullets, margin or padding), so
+the direction comes from a layout primitive: `.stack-*` for a vertical list,
+`.cluster-*` for a horizontal one. Each link is an `<a class="nav-link">`. The current
+page is marked with `aria-current="page"`, the single state attribute for navigation.
+
+### Example
+
+```html
+<nav aria-label="Settings">
+  <ul class="nav stack-sm" role="list">
+    <li><a class="nav-link" href="/settings/general" aria-current="page">General</a></li>
+    <li><a class="nav-link" href="/settings/members">Members</a></li>
+    <li><a class="nav-link" href="/settings/billing">Billing</a></li>
+  </ul>
+</nav>
+```
+
+### Variants
+
+| Class or attribute | Use |
+| --- | --- |
+| `.nav` | On the `<ul>` or `<ol>`: removes bullets, margin and padding. Sets no layout. |
+| `.nav-link` | On each `<a href>`: an inline-flex row with `--space-2` between an optional leading `<svg>` and the label, `--space-2` / `--space-3` padding, `--radius-md` corners, no underline, inherited text color. Hover shows `--color-surface`. |
+| `aria-current="page"` | On the link to the current page: a `--color-primary` tint and `--color-primary` text. |
+
+There are no state classes: never add `.is-active`, `.active` or `.nav-link-current`;
+put `aria-current="page"` on the link instead.
+
+An icon before the label is sized to `1em`:
+
+```html
+<a class="nav-link" href="/projects">
+  <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">…</svg>
+  Projects
+</a>
+```
+
+### Composition
+
+Vertical in a `.sidebar` with `.stack-sm`, or horizontal in a header with `.cluster-sm`
+inside `.split`:
+
+```html
+<header class="split">
+  <a href="/">Acme</a>
+  <nav aria-label="Main">
+    <ul class="nav cluster-sm" role="list">
+      <li><a class="nav-link" href="/projects" aria-current="page">Projects</a></li>
+      <li><a class="nav-link" href="/team">Team</a></li>
+      <li><a class="nav-link" href="/settings">Settings</a></li>
+    </ul>
+  </nav>
+</header>
+```
+
+### Accessibility
+
+- Wrap the list in `<nav>` with an `aria-label` when the page has more than one
+  navigation region.
+- Use `aria-current="page"` on exactly one link. Screen readers announce it as
+  "current page", and SynthCSS styles it from the same attribute, so the visual and
+  announced state never disagree.
+- Add `role="list"` to keep list semantics in Safari/VoiceOver after the bullets are
+  removed.
+- Links show a `:focus-visible` ring from `--focus-width`, `--focus-color` and
+  `--focus-offset`.
+
+### Recommended use
+
+Main and secondary navigation between pages, settings menus, documentation sidebars.
+
+### Misuse
+
+- Buttons that act on the current page; use `.button`.
+- Switching views inside one page; use `.tabs`.
+- State classes for the current link; use `aria-current="page"`.
+
+## `.tabs`
+
+### Purpose
+
+A tab list or segmented control: an inline group of options on a `--color-surface`
+track, where one option is selected. Each option is a `<button class="tabs-item"
+role="tab">`; the selected one has `aria-selected="true"` and the others
+`aria-selected="false"`. That is the single state attribute for tabs.
+
+The component is CSS only. Moving focus with the arrow keys, updating `aria-selected`
+and showing the matching panel are up to your own script.
+
+### Example
+
+```html
+<div class="tabs" role="tablist" aria-label="Members">
+  <button type="button" class="tabs-item" role="tab" aria-selected="true">All</button>
+  <button type="button" class="tabs-item" role="tab" aria-selected="false">Admins</button>
+  <button type="button" class="tabs-item" role="tab" aria-selected="false">Invited</button>
+</div>
+```
+
+### Variants
+
+| Class or attribute | Use |
+| --- | --- |
+| `.tabs` | The track: inline-flex, `--color-surface` background, a border, `--space-1` inner padding and gap, `--radius-md` corners. It wraps onto more lines instead of overflowing a narrow container. |
+| `.tabs-item` | One option: a button reset with `--space-1` / `--space-3` padding, `--text-sm`, a transparent background and `--color-text-secondary` text. |
+| `aria-selected="true"` | The selected option: `--color-surface-elevated` background, `--border-color` border and `--shadow-sm`, in `--color-text`. `aria-selected="false"` keeps the default look. |
+
+Do not use `aria-pressed` or classes such as `.is-selected` for the selected option.
+
+### Composition
+
+Put a filter next to a heading with `.split`, or above content in a `.stack`. Inside
+`.cluster` it sits in the row with other controls:
+
+```html
+<section class="stack">
+  <header class="split">
+    <h2>Members</h2>
+    <div class="tabs" role="tablist" aria-label="Filter members">
+      <button type="button" class="tabs-item" role="tab" aria-selected="true">Active</button>
+      <button type="button" class="tabs-item" role="tab" aria-selected="false">Invited</button>
+    </div>
+  </header>
+  <div class="table-wrap" role="region" aria-label="Members" tabindex="0">…</div>
+</section>
+```
+
+### Accessibility
+
+- Give the `.tabs` element `role="tablist"` and an `aria-label`, and each item
+  `role="tab"` with `aria-selected="true"` or `"false"`.
+- When the tabs switch panels, link each tab to its panel with `aria-controls` and give
+  the panel `role="tabpanel"` and `aria-labelledby`. Panels are not styled by SynthCSS.
+- Keyboard: the recommended pattern is a roving `tabindex` (only the selected tab is
+  in the tab order) with arrow keys moving between tabs. That script is the author's.
+- Items show a `:focus-visible` ring from the `--focus-*` tokens.
+
+### Recommended use
+
+Switching between views of the same content (All / Active / Archived), segmented
+filters, and tabbed sections on one page.
+
+### Misuse
+
+- Navigating to other pages; use `.nav` with `aria-current="page"`.
+- Toggle buttons with `aria-pressed`; SynthCSS tabs use `aria-selected`.
+- A single on/off option; use a checkbox in a `.field`.
+
 ## Verification
 
 - `npm test` runs [`scripts/check-components.mjs`](../scripts/check-components.mjs). It
@@ -645,15 +802,21 @@ what to do next.
   (`src/synthcss.css` with its imports inlined) and no other class is added; that every
   declaration uses tokens defined in `tokens.css`, with no hex, `rgb()`, `hsl()` or named
   color literals and no hard-coded lengths; that text on every button, badge, alert,
-  card and panel background meets 4.5:1 contrast; that buttons, field controls and
-  `.table-wrap` have `:focus-visible` rings; that buttons and fields have disabled
+  card and panel background, and on the current nav link and default and selected tabs,
+  meets 4.5:1 contrast; that buttons, field controls, nav links, tabs and `.table-wrap`
+  have `:focus-visible` rings; that `.nav` resets the list without setting a layout,
+  the current nav link (`aria-current="page"`) and selected tab
+  (`aria-selected="true"`) are styled from those attributes, `aria-pressed` is not used
+  and `.tabs` wraps; that buttons and fields have disabled
   styles, buttons a loading style, and the field error state changes the border width
   and adds a marker; that `.table-wrap` scrolls horizontally; that this page covers
   every component and has the reference table; and that every class in an `html` example
   in `README.md` and `docs/`, and on the showcase page, exists in the CSS.
 - `npm run check:components:browser` loads the showcase in headless Chromium at 375px
   and 1280px and checks that the components render with their tokens, that tables
-  scroll inside `.table-wrap` without the page overflowing, and that focus rings show.
+  scroll inside `.table-wrap` without the page overflowing, that the current nav link
+  and the selected tab look different from the others, that `.tabs` does not overflow
+  at 320px, and that focus rings show.
   It needs Playwright: run `npm install --no-save playwright` and
   `npx playwright install chromium` first.
 - The [showcase](../showcase/index.html) shows every component and a composed settings
diff --git a/scripts/check-components-browser.mjs b/scripts/check-components-browser.mjs
index a80628d..665f0f2 100644
--- a/scripts/check-components-browser.mjs
+++ b/scripts/check-components-browser.mjs
@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 // Optional browser check of the components on showcase/index.html at 375px and
-// 1280px viewport width: tokens applied, states, focus rings and table scrolling.
+// 1280px viewport width: tokens applied, states, focus rings and table scrolling,
+// plus .tabs at 320px.
 // Needs Playwright, which is not a dependency of this repository:
 //   npm install --no-save playwright && npx playwright install chromium
 // Usage: node scripts/check-components-browser.mjs
@@ -70,6 +71,37 @@ try {
         overflowX: getComputedStyle(w).overflowX,
         scrolls: w.scrollWidth > w.clientWidth,
       }));
+      // Nav and tabs: attribute-driven states and layout inside .stack / .cluster.
+      const look = (el) => {
+        const s = getComputedStyle(el);
+        return [s.backgroundColor, s.color, s.boxShadow, s.borderTopColor].join("|");
+      };
+      function navAndTabs() {
+        const links = [...document.querySelectorAll("#component-nav ~ .sc-demo .nav-link")];
+        const current = links.find((a) => a.getAttribute("aria-current") === "page");
+        const plain = links.find((a) => !a.hasAttribute("aria-current"));
+        const items = [...document.querySelectorAll("#component-tabs ~ .sc-demo .tabs-item")];
+        const selected = items.find((b) => b.getAttribute("aria-selected") === "true");
+        const unselected = items.filter((b) => b.getAttribute("aria-selected") === "false");
+        const lists = [...document.querySelectorAll("#component-nav ~ .sc-demo .nav")];
+        const vertical = lists.find((l) => l.classList.contains("stack-sm"));
+        const horizontal = lists.find((l) => l.classList.contains("cluster-sm"));
+        const top = (el) => el.getBoundingClientRect().top;
+        const rows = (list) => new Set([...list.children].map((li) => Math.round(top(li)))).size;
+        const ls = getComputedStyle(lists[0]);
+        return {
+          navCurrentColor: getComputedStyle(current).color === token("--color-primary"),
+          navCurrentDistinct: look(current) !== look(plain),
+          navUnderline: getComputedStyle(plain).textDecorationLine,
+          navReset: ls.listStyleType === "none" && ls.paddingInlineStart === "0px" && ls.marginTop === "0px",
+          navVertical: rows(vertical) === vertical.children.length,
+          navHorizontal: rows(horizontal) === 1,
+          tabSelectedBg: getComputedStyle(selected).backgroundColor === token("--color-surface-elevated"),
+          tabSelectedDistinct: unselected.every((b) => look(b) !== look(selected)),
+          tabUnselectedSame: unselected.every((b) => look(b) === look(unselected[0])),
+          tabTrackBg: getComputedStyle(selected.parentElement).backgroundColor === token("--color-surface"),
+        };
+      }
       const result = {
         overflow: document.documentElement.scrollWidth > document.documentElement.clientWidth,
         primaryBg: css("#components .button-primary", "background-color") === token("--color-primary"),
@@ -86,6 +118,7 @@ try {
         numericAlign: css("#components .table .numeric", "text-align"),
         emptyAlign: css("#components .empty-state", "text-align"),
         wraps,
+        ...navAndTabs(),
       };
       probe.remove();
       return result;
@@ -106,6 +139,13 @@ try {
     expect(m.emptyAlign === "center", `${width}px: .empty-state is not centered`);
     expect(m.wraps.length > 0 && m.wraps.every((w) => w.overflowX === "auto"), `${width}px: .table-wrap does not scroll horizontally`);
     if (width === 375) expect(m.wraps.some((w) => w.scrolls), "375px: no table scrolls inside .table-wrap at phone width");
+    expect(m.navCurrentColor, `${width}px: .nav-link[aria-current="page"] text is not --color-primary`);
+    expect(m.navCurrentDistinct, `${width}px: .nav-link[aria-current="page"] looks like the other links`);
+    expect(m.navUnderline === "none", `${width}px: .nav-link is underlined`);
+    expect(m.navReset, `${width}px: .nav does not reset bullets, padding and margin`);
+    expect(m.navVertical && m.navHorizontal, `${width}px: .nav does not follow .stack-sm (vertical) and .cluster-sm (horizontal)`);
+    expect(m.tabSelectedBg && m.tabTrackBg, `${width}px: .tabs track or selected .tabs-item does not use its surface tokens`);
+    expect(m.tabSelectedDistinct && m.tabUnselectedSame, `${width}px: aria-selected="true" is not distinct, or aria-selected="false" items differ`);
 
     for (const [what, sel] of [
       ["button", "#components .button"],
@@ -113,12 +153,43 @@ try {
       ["select", "#components .field select"],
       ["checkbox", "#components .field input[type=checkbox]"],
       ["table-wrap", "#components .table-wrap"],
+      ["nav-link", "#components .nav-link"],
+      ["tabs-item", "#components .tabs-item"],
     ]) {
       const ring = await tabTo(page, sel);
       expect(ring && ring.style === "solid" && ring.width > 0, `${width}px: ${what} has no visible :focus-visible ring`);
     }
     await page.close();
   }
+
+  // At 320px every .tabs on the page stays inside its container (it wraps).
+  const narrow = await browser.newPage({ viewport: { width: 320, height: 800 } });
+  await narrow.goto(pageUrl, { waitUntil: "load" });
+  const tabs = await narrow.evaluate(() =>
+    [...document.querySelectorAll(".tabs")].map((t) => {
+      const box = t.getBoundingClientRect();
+      const parent = t.parentElement.getBoundingClientRect();
+      return { overflows: t.scrollWidth > t.clientWidth || box.right > parent.right + 0.5, label: t.getAttribute("aria-label") };
+    }),
+  );
+  expect(tabs.length > 0, "320px: no .tabs found on the showcase");
+  for (const t of tabs) expect(!t.overflows, `320px: .tabs "${t.label}" overflows its container`);
+  // A long tab list at 320px must wrap onto more rows rather than overflow. (The
+  // showcase hero is measured separately; here only the tabs' own box counts.)
+  const wide = await narrow.evaluate(() => {
+    const t = document.querySelector("#components .tabs").cloneNode(true);
+    for (let i = 0; i < 6; i++) t.append(t.firstElementChild.cloneNode(true));
+    document.body.prepend(t);
+    const right = Math.max(t.getBoundingClientRect().right, ...[...t.children].map((b) => b.getBoundingClientRect().right));
+    const r = {
+      overflow: t.scrollWidth > t.clientWidth || right > document.body.getBoundingClientRect().right + 0.5,
+      rows: new Set([...t.children].map((b) => Math.round(b.getBoundingClientRect().top))).size,
+    };
+    t.remove();
+    return r;
+  });
+  expect(!wide.overflow && wide.rows > 1, `320px: a long .tabs does not wrap (rows: ${wide.rows}, overflows: ${wide.overflow})`);
+  await narrow.close();
 } finally {
   await browser.close();
 }
@@ -128,4 +199,4 @@ if (errors.length) {
   console.error(`\ncheck-components-browser: ${errors.length} problem(s) found.`);
   process.exit(1);
 }
-console.log("check-components-browser: components render with tokens, states, focus rings and scrolling tables at 375px and 1280px.");
+console.log("check-components-browser: components render with tokens, states, focus rings and scrolling tables at 375px and 1280px; .tabs wraps at 320px.");
diff --git a/scripts/check-components.mjs b/scripts/check-components.mjs
index a4cf490..6f84519 100644
--- a/scripts/check-components.mjs
+++ b/scripts/check-components.mjs
@@ -19,6 +19,8 @@ export const COMPONENTS = {
   panel: ["panel", "panel-header", "panel-body"],
   table: ["table", "table-wrap", "table-hover", "numeric"],
   "empty-state": ["empty-state"],
+  nav: ["nav", "nav-link"],
+  tabs: ["tabs", "tabs-item"],
 };
 export const COMPONENT_NAMES = Object.keys(COMPONENTS);
 export const COMPONENT_CLASSES = Object.values(COMPONENTS).flat();
@@ -44,6 +46,15 @@ const COLOR_VARIANTS = [
   ["panel", "panel"],
 ];
 
+// Attribute-driven states: [label, selectors merged in order]. The text color
+// is checked against the last opaque background (transparent items show the
+// track behind them).
+const STATE_COLORS = [
+  ['.nav-link[aria-current="page"]', [".nav-link", '.nav-link[aria-current="page"]']],
+  [".tabs-item", [".tabs", ".tabs-item"]],
+  ['.tabs-item[aria-selected="true"]', [".tabs", ".tabs-item", '.tabs-item[aria-selected="true"]']],
+];
+
 export const DOC_SECTIONS = ["Purpose", "Example", "Variants", "Composition", "Accessibility", "Recommended use"];
 export const MAX_REFERENCE_ROWS = 15;
 
@@ -200,6 +211,8 @@ export function checkComponentsCss(componentsCss, tokensCss) {
     ["field controls (textarea)", /\.field\b.*\btextarea\b.*:focus-visible/],
     ["field controls (select)", /\.field\b.*\bselect\b.*:focus-visible/],
     ["table-wrap", /\.table-wrap:focus-visible/],
+    ["nav-link", /^\.nav-link:focus-visible$/],
+    ["tabs-item", /^\.tabs-item:focus-visible$/],
   ];
   for (const [what, re] of focusTargets) {
     if (!has((r) => sel(r, re) && focusRing(r))) {
@@ -237,15 +250,54 @@ export function checkComponentsCss(componentsCss, tokensCss) {
     errors.push(".numeric cells must be right-aligned with tabular-nums");
   }
 
-  // Contrast of text on each variant's background.
-  const plainDecls = (cls) => rules.filter((r) => r.selectors.includes(`.${cls}`)).flatMap((r) => r.decls);
+  // Nav and tabs: list reset, attribute-driven state, wrapping track.
+  const declsOf = (selector) => rules.filter((r) => r.selectors.includes(selector)).flatMap((r) => r.decls);
+  const navDecls = declsOf(".nav");
+  if (!navDecls.some((d) => d.prop === "list-style" && /^none\b/.test(d.value))) errors.push(".nav must remove list bullets (list-style: none)");
+  for (const prop of ["margin", "padding"]) {
+    if (!navDecls.some((d) => d.prop === prop && d.value === "0")) errors.push(`.nav must reset the list ${prop} to 0`);
+  }
+  if (navDecls.some((d) => d.prop === "display")) errors.push(".nav must not set display; layout comes from .stack-* or .cluster-*");
+  const stateDecls = (selector) => declsOf(selector).filter((d) => /^(background(-color)?|color)$/.test(d.prop));
+  if (!stateDecls('.nav-link[aria-current="page"]').length) {
+    errors.push('.nav-link[aria-current="page"] must change the background or text color');
+  }
+  if (!has((r) => sel(r, /^\.nav-link:hover$/) && decl(r, "background", /^var\(--color-surface\)$/))) {
+    errors.push(".nav-link:hover must use background: var(--color-surface)");
+  }
+  const selected = declsOf('.tabs-item[aria-selected="true"]');
+  if (!selected.some((d) => /^background(-color)?$/.test(d.prop) && d.value === "var(--color-surface-elevated)")) {
+    errors.push('.tabs-item[aria-selected="true"] must use background: var(--color-surface-elevated)');
+  }
+  if (!selected.some((d) => (d.prop === "box-shadow" && d.value !== "none") || /^border(-[\w-]+)?-color$|^border$/.test(d.prop))) {
+    errors.push('.tabs-item[aria-selected="true"] must look raised (a shadow or border token)');
+  }
+  if (!declsOf(".tabs-item").some((d) => /^background(-color)?$/.test(d.prop) && d.value === "transparent")) {
+    errors.push(".tabs-item must have a transparent background by default");
+  }
+  if (!declsOf(".tabs").some((d) => d.prop === "flex-wrap" && d.value === "wrap")) {
+    errors.push(".tabs must set flex-wrap: wrap so it never overflows narrow containers");
+  }
+  if (rules.some((r) => r.selectors.some((s) => /\[aria-pressed\b/.test(s)))) {
+    errors.push('components.css must not style aria-pressed; tabs use aria-selected="true"');
+  }
+
+  // Contrast of text on each variant's and state's background.
+  const plainDecls = (cls) => declsOf(`.${cls}`);
   const last = (decls, props) => decls.filter((d) => props.includes(d.prop)).at(-1)?.value;
-  for (const [variant, base] of COLOR_VARIANTS) {
-    const decls = variant === base ? plainDecls(base) : [...plainDecls(base), ...plainDecls(variant)];
+  const pairs = [
+    ...COLOR_VARIANTS.map(([variant, base]) => [
+      `.${variant}`,
+      variant === base ? plainDecls(base) : [...plainDecls(base), ...plainDecls(variant)],
+    ]),
+    ...STATE_COLORS.map(([label, selectors]) => [label, selectors.flatMap(declsOf)]),
+  ];
+  for (const [label, allDecls] of pairs) {
+    const decls = allDecls.filter((d) => d.value !== "transparent");
     const fg = last(decls, ["color"]);
     const bg = last(decls, ["background", "background-color"]);
     if (!fg || !bg) {
-      errors.push(`.${variant} must set both color and background`);
+      errors.push(`${label} must set both color and background`);
       continue;
     }
     try {
@@ -253,9 +305,9 @@ export function checkComponentsCss(componentsCss, tokensCss) {
       const b = colorOf(bg, tokens);
       if (!a || !b) throw new Error("could not resolve colors");
       const ratio = contrastRatio(a, b);
-      if (ratio < 4.5) errors.push(`contrast too low in .${variant}: ${ratio.toFixed(2)}:1 (min 4.5:1)`);
+      if (ratio < 4.5) errors.push(`contrast too low in ${label}: ${ratio.toFixed(2)}:1 (min 4.5:1)`);
     } catch (err) {
-      errors.push(`contrast of .${variant}: ${err.message}`);
+      errors.push(`contrast of ${label}: ${err.message}`);
     }
   }
   return errors;
diff --git a/scripts/check-components.test.mjs b/scripts/check-components.test.mjs
index 8151fa5..b709e7f 100644
--- a/scripts/check-components.test.mjs
+++ b/scripts/check-components.test.mjs
@@ -73,6 +73,52 @@ test("fails when disabled or loading selectors are missing", () => {
   assertError(errorsWith(noSpinner), "loading indicator");
 });
 
+test("fails when nav or tabs lose their focus ring", () => {
+  const nav = withCss((css) => css.replace(".nav-link:focus-visible {", ".nav-link:focus {"));
+  assertError(errorsWith(nav), "nav-link needs a :focus-visible rule");
+  const tabs = withCss((css) => css.replace(".tabs-item:focus-visible {", ".tabs-item:focus {"));
+  assertError(errorsWith(tabs), "tabs-item needs a :focus-visible rule");
+});
+
+test("fails when .nav does not reset the list or sets a layout", () => {
+  const bullets = withCss((css) => css.replace(/(\.nav \{[^}]*)list-style: none;/, "$1"));
+  assertError(errorsWith(bullets), ".nav must remove list bullets");
+  const padding = withCss((css) => css.replace(/(\.nav \{[^}]*)padding: 0;/, "$1"));
+  assertError(errorsWith(padding), ".nav must reset the list padding to 0");
+  const display = withCss((css) => css.replace(".nav {\n", ".nav {\n  display: flex;\n"));
+  assertError(errorsWith(display), ".nav must not set display");
+});
+
+test("fails when nav and tabs state does not come from aria-current and aria-selected", () => {
+  const current = withCss((css) => css.replaceAll('.nav-link[aria-current="page"]', '.nav-link[data-current]'));
+  assertError(errorsWith(current), '.nav-link[aria-current="page"] must change the background or text color');
+  const hover = withCss((css) => css.replace(/(\.nav-link:hover \{\n  background: )var\(--color-surface\)/, "$1var(--color-surface-elevated)"));
+  assertError(errorsWith(hover), ".nav-link:hover must use background: var(--color-surface)");
+  const pressed = withCss((css) => css.replaceAll('.tabs-item[aria-selected="true"]', '.tabs-item[aria-pressed="true"]'));
+  assertError(errorsWith(pressed), '.tabs-item[aria-selected="true"] must use background: var(--color-surface-elevated)');
+  assertError(errorsWith(pressed), "must not style aria-pressed");
+  const flat = withCss((css) =>
+    css.replace(/(\.tabs-item\[aria-selected="true"\] \{\n)  border-color: var\(--border-color\);\n([^}]*)  box-shadow: var\(--shadow-sm\);\n/, "$1$2"),
+  );
+  assertError(errorsWith(flat), "must look raised");
+  const opaque = withCss((css) => css.replace(/(\.tabs-item \{[^}]*background: )transparent;/, "$1var(--color-surface);"));
+  assertError(errorsWith(opaque), ".tabs-item must have a transparent background by default");
+  const state = withCss((css) => css + '\n.tabs-item-selected { background: var(--color-surface-elevated); color: var(--color-text); }\n');
+  assertError(errorsWith(state), "unexpected class .tabs-item-selected");
+});
+
+test("fails when .tabs can overflow instead of wrapping", () => {
+  const nowrap = withCss((css) => css.replace(/(\.tabs \{[^}]*)flex-wrap: wrap;/, "$1flex-wrap: nowrap;"));
+  assertError(errorsWith(nowrap), ".tabs must set flex-wrap: wrap");
+});
+
+test("fails when the current nav link or a tab has too little contrast", () => {
+  const nav = withCss((css) => css.replace("var(--color-primary) 10%, var(--color-background)", "var(--color-primary) 70%, var(--color-background)"));
+  assertError(errorsWith(nav), 'contrast too low in .nav-link[aria-current="page"]');
+  const tab = withCss((css) => css.replace(/(\.tabs-item \{[^}]*color: )var\(--color-text-secondary\)/, "$1var(--color-border)"));
+  assertError(errorsWith(tab), "contrast too low in .tabs-item");
+});
+
 test("fails when the field error state relies on color alone", () => {
   const colorOnly = withCss((css) =>
     css.replace(/(\)\[aria-invalid="true"\] \{\n  border-color: var\(--color-danger\);\n)[^}]*\}/, "$1}"),
diff --git a/scripts/verify-ai-contract.mjs b/scripts/verify-ai-contract.mjs
index 5a6820c..5b0ef83 100644
--- a/scripts/verify-ai-contract.mjs
+++ b/scripts/verify-ai-contract.mjs
@@ -41,6 +41,10 @@ export const MD_SECTIONS = [
 ];
 const INVALID_SECTION = "Invalid / Discouraged Examples";
 export const GENERATION_RULES = 10;
+// Parts whose state comes from one ARIA attribute. The contract must name that
+// attribute in the part's entry (JSON and Markdown), and the Markdown must rule
+// out aria-pressed, so models do not pick a different attribute per run.
+export const STATE_ATTRIBUTES = { "nav-link": 'aria-current="page"', "tabs-item": 'aria-selected="true"' };
 export const VALID_EXAMPLES = [2, 4];
 // The showcase may round the size it prints; it must stay within this fraction.
 export const SHOWCASE_SIZE_TOLERANCE = 0.1;
@@ -315,6 +319,16 @@ export function verifyContract(files, { maxTokens = DEFAULT_MAX_TOKENS } = {}) {
   for (const token of diff(jsonTokens, mdTokens)) errors.push(`token ${token} is in ${JSON_FILE} but not in the ${LLM_FILE} Design Tokens`);
   for (const token of diff(mdTokens, jsonTokens)) errors.push(`token ${token} is in the ${LLM_FILE} Design Tokens but not in ${JSON_FILE}`);
 
+  for (const [part, attr] of Object.entries(STATE_ATTRIBUTES)) {
+    const owner = Object.values(contract.components).find((comp) => part in comp.parts);
+    if (owner && !owner.parts[part].includes(attr)) errors.push(`${JSON_FILE}: the .${part} entry must name its state attribute ${attr}`);
+    const line = section("Component Vocabulary").split("\n").find((l) => l.includes(`\`.${part}\``));
+    if (line && !line.includes(attr)) errors.push(`${LLM_FILE}: the .${part} entry must name its state attribute ${attr}`);
+  }
+  if (!/never\b[^\n]*`aria-pressed`/i.test(section("Component Vocabulary"))) {
+    errors.push(`${LLM_FILE}: the Component Vocabulary must say never to use \`aria-pressed\``);
+  }
+
   const rows = section("Intent Mapping").split("\n").filter((l) => /^\s*\|/.test(l)).slice(2);
   if (rows.length !== contract.intentMap.length) {
     errors.push(`${LLM_FILE}: the Intent Mapping table has ${rows.length} rows, ${JSON_FILE} has ${contract.intentMap.length}`);
diff --git a/scripts/verify-ai-contract.test.mjs b/scripts/verify-ai-contract.test.mjs
index 04adc60..761147d 100644
--- a/scripts/verify-ai-contract.test.mjs
+++ b/scripts/verify-ai-contract.test.mjs
@@ -56,6 +56,28 @@ test("fails when a class is deleted from the contract", () => {
   assertError(errorsWith({ md }), "class .split-lg is in synthcss.ai.json but not in the synthcss.llm.md vocabulary");
 });
 
+test("lists nav and tabs with their intent rows and one state attribute each", () => {
+  assert.ok(contract.components.nav.parts["nav-link"]);
+  assert.ok(contract.components.tabs.parts["tabs-item"]);
+  assert.ok(contract.intentMap.some((e) => e.intent === "Navigation links" && e.use === ".nav + .nav-link"));
+  assert.ok(contract.intentMap.some((e) => e.intent === "Tabs or segmented filter" && e.use === ".tabs + .tabs-item"));
+  assert.match(files.md, /^\| Navigation links \| `\.nav` \+ `\.nav-link` \|$/m);
+  assert.match(files.md, /^\| Tabs or segmented filter \| `\.tabs` \+ `\.tabs-item` \|$/m);
+  const tabs = withJson((c) => delete c.components.tabs);
+  assertError(errorsWith(tabs), "class .tabs-item is in the SynthCSS CSS but missing from synthcss.ai.json");
+  const md = files.md.replace("| Navigation links | `.nav` + `.nav-link` |\n", "");
+  assertError(errorsWith({ md }), "the Intent Mapping table has");
+});
+
+test("fails when the contract drops or changes a state attribute, or allows aria-pressed", () => {
+  const json = withJson((c) => (c.components.tabs.parts["tabs-item"] = "<button role=\"tab\">; selected: aria-pressed=\"true\""));
+  assertError(errorsWith(json), 'synthcss.ai.json: the .tabs-item entry must name its state attribute aria-selected="true"');
+  const md = files.md.replace(/^(  - part `\.nav-link` — .*?); current page: `aria-current="page"`$/m, "$1");
+  assertError(errorsWith({ md }), 'synthcss.llm.md: the .nav-link entry must name its state attribute aria-current="page"');
+  const pressed = files.md.replace("Never `aria-pressed` or state classes", "Avoid state classes");
+  assertError(errorsWith({ md: pressed }), "never to use `aria-pressed`");
+});
+
 test("fails when a class is added to the CSS but not to the contract", () => {
   const builtCss = files.builtCss + "\n.button-ghost { color: var(--color-text); }\n";
   assertError(errorsWith({ builtCss }), "class .button-ghost is in the SynthCSS CSS but missing from synthcss.ai.json");
diff --git a/showcase/index.html b/showcase/index.html
index a985371..7519bf9 100644
--- a/showcase/index.html
+++ b/showcase/index.html
@@ -452,9 +452,10 @@ <h3 id="responsive-split"><code>.split</code>: adapts</h3>
         <div class="stack-sm">
           <h2 id="components-title">Components</h2>
           <p class="sc-muted">
-            Eight semantic components built only from tokens. State comes from native
-            attributes such as <code>disabled</code>, <code>aria-busy</code> and
-            <code>aria-invalid</code>. Press <kbd>Tab</kbd> to see the focus rings.
+            Ten semantic components built only from tokens. State comes from native
+            attributes such as <code>disabled</code>, <code>aria-busy</code>,
+            <code>aria-invalid</code>, <code>aria-current</code> and
+            <code>aria-selected</code>. Press <kbd>Tab</kbd> to see the focus rings.
           </p>
         </div>
         <div class="grid-lg" style="--grid-min: 22rem">
@@ -711,6 +712,62 @@ <h4>No projects yet</h4>
 &lt;/div&gt;</code></pre></div>
           </article>
 
+          <article class="sc-card stack" aria-labelledby="component-nav">
+            <h3 id="component-nav"><code>.nav</code></h3>
+            <p>Navigation links. <code>.nav</code> resets the list; <code>.stack-sm</code> or <code>.cluster-sm</code> sets the direction. The current page is <code>aria-current="page"</code>.</p>
+            <div class="sc-demo">
+              <div class="stack">
+                <nav aria-label="Demo main navigation">
+                  <ul class="nav cluster-sm" role="list">
+                    <li><a class="nav-link" href="#component-nav" aria-current="page">Projects</a></li>
+                    <li><a class="nav-link" href="#component-nav">Team</a></li>
+                    <li><a class="nav-link" href="#component-nav">Settings</a></li>
+                  </ul>
+                </nav>
+                <nav aria-label="Demo settings navigation">
+                  <ul class="nav stack-sm" role="list">
+                    <li><a class="nav-link" href="#component-nav"><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="2" fill="none"/></svg> General</a></li>
+                    <li><a class="nav-link" href="#component-nav" aria-current="page"><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M2 14c0-3 3-5 6-5s6 2 6 5M8 7a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" stroke="currentColor" stroke-width="2" fill="none"/></svg> Members</a></li>
+                    <li><a class="nav-link" href="#component-nav"><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M2 4h12v8H2zM2 7h12" stroke="currentColor" stroke-width="2" fill="none"/></svg> Billing</a></li>
+                  </ul>
+                </nav>
+              </div>
+            </div>
+            <div class="sc-code"><pre><code>&lt;nav aria-label="Main"&gt;
+  &lt;ul class="nav cluster-sm" role="list"&gt;
+    &lt;li&gt;&lt;a class="nav-link" href="/projects" aria-current="page"&gt;Projects&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a class="nav-link" href="/team"&gt;Team&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;</code></pre></div>
+          </article>
+
+          <article class="sc-card stack" aria-labelledby="component-tabs">
+            <h3 id="component-tabs"><code>.tabs</code></h3>
+            <p>A tab list or segmented filter. The selected item is <code>aria-selected="true"</code> with <code>role="tab"</code>; switching panels is up to your script.</p>
+            <div class="sc-demo">
+              <div class="stack">
+                <div class="tabs" role="tablist" aria-label="Demo member filter">
+                  <button type="button" class="tabs-item" role="tab" aria-selected="true">All</button>
+                  <button type="button" class="tabs-item" role="tab" aria-selected="false">Admins</button>
+                  <button type="button" class="tabs-item" role="tab" aria-selected="false">Invited</button>
+                </div>
+                <div class="cluster-sm">
+                  <div class="tabs" role="tablist" aria-label="Demo period">
+                    <button type="button" class="tabs-item" role="tab" aria-selected="false">Day</button>
+                    <button type="button" class="tabs-item" role="tab" aria-selected="true">Week</button>
+                    <button type="button" class="tabs-item" role="tab" aria-selected="false">Month</button>
+                  </div>
+                  <button type="button" class="button button-sm">Export</button>
+                </div>
+              </div>
+            </div>
+            <div class="sc-code"><pre><code>&lt;div class="tabs" role="tablist" aria-label="Members"&gt;
+  &lt;button type="button" class="tabs-item" role="tab" aria-selected="true"&gt;All&lt;/button&gt;
+  &lt;button type="button" class="tabs-item" role="tab" aria-selected="false"&gt;Admins&lt;/button&gt;
+  &lt;button type="button" class="tabs-item" role="tab" aria-selected="false"&gt;Invited&lt;/button&gt;
+&lt;/div&gt;</code></pre></div>
+          </article>
+
         </div>
       </div>
     </section>
@@ -729,10 +786,10 @@ <h2 id="composed-title">Composed interface</h2>
         <div class="sc-frame" id="frame-composed">
           <div class="sidebar" data-composed>
             <nav class="panel" aria-label="Project settings">
-              <ul class="stack-sm" role="list">
-                <li><a href="#composed">General</a></li>
-                <li><a href="#composed">Members</a></li>
-                <li><a href="#composed">Billing</a></li>
+              <ul class="nav stack-sm" role="list">
+                <li><a class="nav-link" href="#composed" aria-current="page">General</a></li>
+                <li><a class="nav-link" href="#composed">Members</a></li>
+                <li><a class="nav-link" href="#composed">Billing</a></li>
               </ul>
             </nav>
             <div class="stack-lg">
@@ -809,6 +866,11 @@ <h4 id="composed-envs">Environments</h4>
                   <h4 id="composed-members">Members</h4>
                   <button type="button" class="button button-sm">Invite</button>
                 </header>
+                <div class="tabs" role="tablist" aria-label="Filter members">
+                  <button type="button" class="tabs-item" role="tab" aria-selected="true">All</button>
+                  <button type="button" class="tabs-item" role="tab" aria-selected="false">Owners</button>
+                  <button type="button" class="tabs-item" role="tab" aria-selected="false">Developers</button>
+                </div>
                 <div class="table-wrap" role="region" aria-labelledby="composed-members" tabindex="0">
                   <table class="table table-hover">
                     <thead>
@@ -942,7 +1004,7 @@ <h2 id="ai-contract-title">AI Contract</h2>
           <a class="sc-button" href="../synthcss.llm.md">View synthcss.llm.md</a>
           <a class="sc-button sc-button-secondary" href="../synthcss.ai.json" download>Download synthcss.ai.json</a>
           <a href="https://github.com/nabledhq/synthcss/blob/main/synthcss.llm.md">Read it on GitHub</a>
-          <span class="badge badge-info">≈ 2,830 tokens</span>
+          <span class="badge badge-info">≈ 3,490 tokens</span>
         </div>
         <p class="sc-muted">
           Size estimated as characters ÷ 4 (about 11,300 characters), small enough for one
diff --git a/src/components.css b/src/components.css
index 636984c..69c67a2 100644
--- a/src/components.css
+++ b/src/components.css
@@ -1,15 +1,17 @@
 /*
  * SynthCSS components
  *
- * Eight semantic components on top of the design tokens and layout
- * primitives: button, field, card, badge, alert, panel, table, empty-state.
+ * Ten semantic components on top of the design tokens and layout
+ * primitives: button, field, card, badge, alert, panel, table, empty-state,
+ * nav and tabs.
  *
  * Rules:
  * - Every color, space, radius, font size, weight and shadow is a token from
  *   tokens.css. No color literals; tints are color-mix() of two tokens.
  * - Naming is .component, .component-variant, .component-part.
  * - State comes from native attributes, not classes: :disabled,
- *   [aria-disabled="true"], [aria-busy="true"], [aria-invalid="true"].
+ *   [aria-disabled="true"], [aria-busy="true"], [aria-invalid="true"],
+ *   [aria-current="page"] (nav) and [aria-selected="true"] (tabs).
  * - Components never set `display` on parts meant to be combined with a
  *   layout primitive (for example `class="card-footer split"`).
  * - Child margin resets use :where() so any author rule wins.
@@ -709,3 +711,125 @@
   block-size: auto;
   color: var(--color-text-muted);
 }
+
+/* -------------------------------------------------------------------------
+   Nav: a list of navigation links. .nav only resets the list; add .stack-*
+   for a vertical list or .cluster-* for a horizontal one. The current page
+   is marked with aria-current="page", never with a class.
+   ------------------------------------------------------------------------- */
+.nav {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  padding-block: var(--space-2);
+  padding-inline: var(--space-3);
+  border-radius: var(--radius-md);
+  color: inherit;
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-tight);
+  text-decoration: none;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+}
+
+.nav-link > :where(svg, img) {
+  flex-shrink: 0;
+  inline-size: 1em;
+  block-size: 1em;
+}
+
+.nav-link:hover {
+  background: var(--color-surface);
+}
+
+.nav-link[aria-current="page"] {
+  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-background));
+  color: var(--color-primary);
+}
+
+.nav-link:focus-visible {
+  outline: var(--focus-width) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+
+/* -------------------------------------------------------------------------
+   Tabs: a segmented control or tab list on a surface track. The selected
+   item is marked with aria-selected="true" (with role="tab"), never with
+   aria-pressed or a class. CSS only: arrow-key focus and panel switching are
+   up to the page's own script. The track wraps instead of overflowing.
+   ------------------------------------------------------------------------- */
+.tabs {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1);
+  box-sizing: border-box;
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  padding: var(--space-1);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text);
+  vertical-align: middle;
+}
+
+.tabs-item {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  margin: 0;
+  padding-block: var(--space-1);
+  padding-inline: var(--space-3);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-normal);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+}
+
+.tabs-item > :where(svg, img) {
+  flex-shrink: 0;
+  inline-size: 1em;
+  block-size: 1em;
+}
+
+.tabs-item:hover {
+  color: var(--color-text);
+}
+
+.tabs-item[aria-selected="true"] {
+  border-color: var(--border-color);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-sm);
+  color: var(--color-text);
+}
+
+.tabs-item:focus-visible {
+  outline: var(--focus-width) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
diff --git a/synthcss.ai.json b/synthcss.ai.json
index ce9e7c1..aebe302 100644
--- a/synthcss.ai.json
+++ b/synthcss.ai.json
@@ -175,6 +175,20 @@
       "intent": "nothing to show yet: icon, heading, text, action",
       "parts": {},
       "variants": {}
+    },
+    "nav": {
+      "intent": "list reset for navigation links on <ul>; add .stack-sm (vertical) or .cluster-sm (horizontal)",
+      "parts": {
+        "nav-link": "an <a href> in .nav, optional leading <svg>; current page: aria-current=\"page\""
+      },
+      "variants": {}
+    },
+    "tabs": {
+      "intent": "tab list or segmented filter; role=\"tablist\" + aria-label; wraps when narrow. CSS only: arrow keys and panel switching are your script",
+      "parts": {
+        "tabs-item": "<button role=\"tab\">; selected: aria-selected=\"true\", others aria-selected=\"false\""
+      },
+      "variants": {}
     }
   },
   "intentMap": [
@@ -196,7 +210,9 @@
     { "intent": "Message or notification", "use": ".alert + .alert-info / -success / -warning / -danger" },
     { "intent": "Secondary grouped content", "use": ".panel + .panel-header / .panel-body" },
     { "intent": "Tabular data", "use": ".table-wrap > .table; .table-hover, .numeric" },
-    { "intent": "No data yet", "use": ".empty-state" }
+    { "intent": "No data yet", "use": ".empty-state" },
+    { "intent": "Navigation links", "use": ".nav + .nav-link" },
+    { "intent": "Tabs or segmented filter", "use": ".tabs + .tabs-item" }
   ],
   "compositionRules": {
     "recommended": [
@@ -211,7 +227,8 @@
       "Wrapper <div>s that add no layout intent.",
       "Restyling a component with extra CSS; override tokens on :root instead.",
       "Classes for state (is-active, disabled); use attributes.",
-      "Visual reordering (order, *-reverse); DOM order is visual order."
+      "Visual reordering (order, *-reverse); DOM order is visual order.",
+      "aria-pressed or classes for the current link or selected tab; use aria-current=\"page\" on .nav-link, aria-selected=\"true\" on .tabs-item."
     ]
   },
   "generationRules": [
@@ -221,7 +238,7 @@
     "Never use inline styles except a token override such as style=\"--grid-min: 12rem\".",
     "In any custom CSS, reference tokens with var(); never hard-code colors, px/rem sizes, shadows or durations.",
     "Put components on semantic native elements and keep one component per element.",
-    "Express state with attributes: disabled, aria-disabled=\"true\", aria-busy=\"true\", aria-invalid=\"true\".",
+    "Express state with attributes: disabled, aria-disabled=\"true\", aria-busy=\"true\", aria-invalid=\"true\", aria-current=\"page\" (nav), aria-selected=\"true\" (tabs).",
     "Pick variants by meaning, not look: button-danger for destructive actions, badge-success for success.",
     "Write no media queries or breakpoint classes; primitives adapt to the space they get.",
     "Keep it accessible: aria-label on .button-icon, role=\"status\" or role=\"alert\" on .alert, a <label for> on every control."
@@ -229,8 +246,8 @@
   "examples": {
     "valid": [
       {
-        "html": "<main class=\"container stack-lg\">\n  <header class=\"split\">\n    <h1>Projects</h1>\n    <button type=\"button\" class=\"button button-primary\">New project</button>\n  </header>\n  <ul class=\"grid\" role=\"list\">\n    <li class=\"card\">\n      <div class=\"card-header\"><h2>Atlas</h2></div>\n      <div class=\"card-body\">Design system migration.</div>\n      <div class=\"card-footer split-sm\"><span class=\"badge badge-success\">Active</span></div>\n    </li>\n  </ul>\n</main>",
-        "note": "Page: container + stack, split header, grid of cards with a status badge."
+        "html": "<main class=\"container stack-lg\">\n  <header class=\"split\">\n    <h1>Projects</h1>\n    <nav aria-label=\"Main\">\n      <ul class=\"nav cluster-sm\" role=\"list\">\n        <li><a class=\"nav-link\" href=\"/projects\" aria-current=\"page\">Projects</a></li>\n        <li><a class=\"nav-link\" href=\"/team\">Team</a></li>\n      </ul>\n    </nav>\n  </header>\n  <div class=\"split\">\n    <div class=\"tabs\" role=\"tablist\" aria-label=\"Filter projects\">\n      <button type=\"button\" class=\"tabs-item\" role=\"tab\" aria-selected=\"true\">Active</button>\n      <button type=\"button\" class=\"tabs-item\" role=\"tab\" aria-selected=\"false\">Archived</button>\n    </div>\n    <button type=\"button\" class=\"button button-primary\">New project</button>\n  </div>\n  <ul class=\"grid\" role=\"list\">\n    <li class=\"card\">\n      <div class=\"card-header\"><h2>Atlas</h2></div>\n      <div class=\"card-body\">Design system migration.</div>\n      <div class=\"card-footer split-sm\"><span class=\"badge badge-success\">Active</span></div>\n    </li>\n  </ul>\n</main>",
+        "note": "Page: container + stack, split header with nav, tabs filter beside the main action, grid of cards with a status badge."
       },
       {
         "html": "<form class=\"card\">\n  <div class=\"field\">\n    <label class=\"field-label\" for=\"email\">Email</label>\n    <input id=\"email\" type=\"email\" aria-invalid=\"true\" aria-describedby=\"email-error\">\n    <p class=\"field-error\" id=\"email-error\">Enter a full email address.</p>\n  </div>\n  <div class=\"cluster-sm\">\n    <button type=\"submit\" class=\"button button-primary\">Save</button>\n    <button type=\"button\" class=\"button\">Cancel</button>\n  </div>\n</form>",
@@ -265,6 +282,14 @@
       {
         "html": "<p class=\"mt-4\">Saved.</p>",
         "note": "Spacing utility. Use .stack on the parent."
+      },
+      {
+        "html": "<a class=\"nav-link active\" href=\"/team\">Team</a>",
+        "note": "State class. Use .nav-link with aria-current=\"page\"."
+      },
+      {
+        "html": "<button class=\"tabs-item\" aria-pressed=\"true\">Week</button>",
+        "note": "aria-pressed for a tab. Use .tabs-item with role=\"tab\" and aria-selected=\"true\"."
       }
     ]
   }
diff --git a/synthcss.llm.md b/synthcss.llm.md
index ce3d211..8bc115f 100644
--- a/synthcss.llm.md
+++ b/synthcss.llm.md
@@ -97,6 +97,7 @@ Work on any element. No breakpoints: they adapt to the space they get.
 ## Component Vocabulary
 
 Naming: component, component-variant, component-part. State comes from attributes, never classes.
+One state attribute each: current nav link `aria-current="page"`; selected tab `role="tab"` + `aria-selected="true"` (others `"false"`). Never `aria-pressed` or state classes (active, is-active, selected).
 
 - `.button` — an action, on `<button>` or `<a href>`
   - variant `.button-primary` — main action of a form or page
@@ -133,6 +134,10 @@ Naming: component, component-variant, component-part. State comes from attribute
   - part `.numeric` — right-aligned tabular-number cell
   - variant `.table-hover` — highlight the hovered row
 - `.empty-state` — nothing to show yet: icon, heading, text, action
+- `.nav` — list reset for navigation links on `<ul>`; add `.stack-sm` (vertical) or `.cluster-sm` (horizontal)
+  - part `.nav-link` — an `<a href>` in `.nav`, optional leading `<svg>`; current page: `aria-current="page"`
+- `.tabs` — tab list or segmented filter; `role="tablist"` + `aria-label`; wraps when narrow. CSS only: arrow keys and panel switching are your script
+  - part `.tabs-item` — `<button role="tab">`; selected: `aria-selected="true"`, others `aria-selected="false"`
 
 ## Intent Mapping
 
@@ -157,6 +162,8 @@ Naming: component, component-variant, component-part. State comes from attribute
 | Secondary grouped content | `.panel` + `.panel-header` / `.panel-body` |
 | Tabular data | `.table-wrap` > `.table`; `.table-hover`, `.numeric` |
 | No data yet | `.empty-state` |
+| Navigation links | `.nav` + `.nav-link` |
+| Tabs or segmented filter | `.tabs` + `.tabs-item` |
 
 ## Composition Rules
 
@@ -175,6 +182,7 @@ Naming: component, component-variant, component-part. State comes from attribute
 - Restyling a component with extra CSS; override tokens on `:root` instead.
 - Classes for state (is-active, disabled); use attributes.
 - Visual reordering (order, *-reverse); DOM order is visual order.
+- `aria-pressed` or classes for the current link or selected tab; use `aria-current="page"` on `.nav-link`, `aria-selected="true"` on `.tabs-item`.
 
 ## AI Generation Rules
 
@@ -184,21 +192,33 @@ Naming: component, component-variant, component-part. State comes from attribute
 4. Never use inline styles except a token override such as `style="--grid-min: 12rem"`.
 5. In any custom CSS, reference tokens with `var()`; never hard-code colors, px/rem sizes, shadows or durations.
 6. Put components on semantic native elements and keep one component per element.
-7. Express state with attributes: `disabled`, `aria-disabled="true"`, `aria-busy="true"`, `aria-invalid="true"`.
+7. Express state with attributes: `disabled`, `aria-disabled="true"`, `aria-busy="true"`, `aria-invalid="true"`, `aria-current="page"` (nav), `aria-selected="true"` (tabs).
 8. Pick variants by meaning, not look: `button-danger` for destructive actions, `badge-success` for success.
 9. Write no media queries or breakpoint classes; primitives adapt to the space they get.
 10. Keep it accessible: `aria-label` on `.button-icon`, `role="status"` or `role="alert"` on `.alert`, a `<label for>` on every control.
 
 ## Valid Examples
 
-Page: container + stack, split header, grid of cards with a status badge.
+Page: container + stack, split header with nav, tabs filter beside the main action, grid of cards with a status badge.
 
 ```html
 <main class="container stack-lg">
   <header class="split">
     <h1>Projects</h1>
-    <button type="button" class="button button-primary">New project</button>
+    <nav aria-label="Main">
+      <ul class="nav cluster-sm" role="list">
+        <li><a class="nav-link" href="/projects" aria-current="page">Projects</a></li>
+        <li><a class="nav-link" href="/team">Team</a></li>
+      </ul>
+    </nav>
   </header>
+  <div class="split">
+    <div class="tabs" role="tablist" aria-label="Filter projects">
+      <button type="button" class="tabs-item" role="tab" aria-selected="true">Active</button>
+      <button type="button" class="tabs-item" role="tab" aria-selected="false">Archived</button>
+    </div>
+    <button type="button" class="button button-primary">New project</button>
+  </div>
   <ul class="grid" role="list">
     <li class="card">
       <div class="card-header"><h2>Atlas</h2></div>
@@ -269,3 +289,5 @@ Never generate these. Each line: wrong markup — why — what to use instead.
 - `<button class="btn btn-primary">Save</button>` — Another framework's names. Use .button and .button-primary.
 - `<span class="badge badge-red">Failed</span>` — Color-named variant. Use .badge and .badge-danger.
 - `<p class="mt-4">Saved.</p>` — Spacing utility. Use .stack on the parent.
+- `<a class="nav-link active" href="/team">Team</a>` — State class. Use .nav-link with aria-current="page".
+- `<button class="tabs-item" aria-pressed="true">Week</button>` — aria-pressed for a tab. Use .tabs-item with role="tab" and aria-selected="true".