Sidebar

A real <aside>, the complementary landmark, for secondary content that still makes sense on its own: docs navigation, a table of contents, filters next to a list. aria-label is required because a page can have more than one <aside>, each needs its own accessible name.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

<Sidebar aria-label="Table of contents">
  <ul>
    <li>Installation</li>
    <li>Usage</li>
  </ul>
</Sidebar>

<kernel-sidebar aria-label="Table of contents">
  <ul>
    <li>Installation</li>
    <li>Usage</li>
  </ul>
</kernel-sidebar>

Props

Accessibility

• Renders a native <aside>, exposed as thecomplementary landmark so assistive tech can skip to or past it independently of the main content.
• The required aria-label distinguishes it from any other<aside> on the page.