Five interactive navigation components — Tabs, Accordion,
Breadcrumb, Pagination and Menu — each accessible,
keyboard-driven and wired by class. These previews render the real @xa/ui
components.
A hands-on DevOps workshop covering containers, CI/CD and infrastructure as code. Use ←/→ to move between tabs, Home/End to jump.
€1,950 per seat · group discounts from 5 seats · on-site option available.
Do I need prior Kubernetes experience? No — we start from fundamentals and build up.
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | {id, label}[] | — | Tab definitions; one role="tab" + panel each |
activeId | string | first tab | Initially-selected tab id |
class | string | — | Extra CSS on the wrapper |
Panels come from named slots panel-{id}. Keyboard: ←/→ move, Home/End jump.
| Prop | Type | Default | Description |
|---|---|---|---|
items | {id, title, open?}[] | — | Disclosure items; open sets initial state |
allowMultiple | boolean | false | Allow several panels open; otherwise single-open |
class | string | — | Extra CSS on the wrapper |
Bodies come from named slots content-{id}. Chevron rotates on expand.
| Prop | Type | Default | Description |
|---|---|---|---|
items | {label, href?}[] | — | Trail items; last is current (aria-current="page", no link) |
class | string | — | Extra CSS on the <nav> |
Renders <nav aria-label="Breadcrumb"><ol> with chevron separators.
xa:page (see result below)Click a page above — the dispatched page lands here.
| Prop | Type | Default | Description |
|---|---|---|---|
currentPage | number | — | Active page (1-based); gets aria-current="page" |
totalPages | number | — | Total number of pages |
baseHref | string | — | When set → link mode (<a>); omit → button mode |
siblings | number | 1 | Page numbers shown either side of current |
class | string | — | Extra CSS on the <nav> |
Button mode dispatches a bubbling CustomEvent('xa:page', { detail: { page } }) on the <nav>.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Trigger button text |
align | 'left' | 'right' | 'left' | Popover alignment relative to the trigger |
class | string | — | Extra CSS on the wrapper |
Slot: pass <a>/<button> items (auto-tagged role="menuitem").
Closes on Escape, outside-click, item click. ↑/↓ move focus.