BankaiAside

A standalone <aside> complementary region — a side rail beside the main content, typically a sidebar nav. The native element carries the complementary role; the theme paints the house side-rail look (padding and an inline-end divider). Reach for it when you build a shell without BankaiLayout.

Usage

<!-- a shell built WITHOUT BankaiLayout -->
<div class="shell">
  <BankaiAside label="Secondary navigation">
    <BankaiSidebar />
  </BankaiAside>
  <main>…</main>
</div>

Naming the landmark

A page can hold more than one complementary landmark (a left nav and a right rail, say). When it does, each needs an accessible name so a screen reader's landmark list can tell them apart — pass label, which sets aria-label (e.g. "Secondary navigation", "Filters"). A single, unambiguous aside can omit it. Your own aria-label / aria-labelledby takes precedence over the prop, so you can point at a visible heading instead.

Landmark uniqueness

Do not place it inside BankaiLayout's #sidebar slot: BankaiLayout already emits an <aside> for that slot, so a nested BankaiAside would produce an <aside> inside an <aside>. With BankaiLayout, drop your sidebar straight into #sidebar; use BankaiAside only for a hand-rolled shell or a second rail. Every theme rule is zero-specificity (:where()), so a plain declaration or utility class overrides the padding, divider, or background without !important.

Props

Prop	Type	Default	Description
`label`	`string`	—	Accessible name for the region, set as aria-label. A page can have several complementary landmarks, so label each one (e.g. "Secondary navigation", "Filters") to tell them apart in a screen reader's landmark list. Omit for a single, unambiguous aside. A consumer's own aria-label / aria-labelledby fallthrough takes precedence over this default.

Emits

This component emits no events.

Slots

Slot	Description
`default`	Side-rail content — typically a BankaiSidebar (sections, collapsible groups).

Exposes

This component exposes nothing on its instance.

Theming

Every token is a :root custom property applied through zero-specificity :where() rules, so a single plain declaration overrides one — no selector, no !important. Set it globally on :root or locally on any ancestor.

Token	Default	Purpose
`--bankai-aside-padding-block`	`var(--bankai-space-8)`	Vertical padding inside the side rail.
`--bankai-aside-padding-inline`	`var(--bankai-space-8)`	Horizontal padding inside the side rail.
`--bankai-aside-border-width`	`1px`	Width of the divider between the rail and the main content.
`--bankai-aside-border-color`	`var(--bankai-color-border)`	Color of that divider.
`--bankai-aside-background`	`var(--bankai-color-bg)`	Background fill of the side rail.