Can I use multiple accordions open at once?

Yes. By default the Accordion allows multiple items to be open. You can set type="single" to enforce only one open at a time.

Do tabs work without JavaScript?

Tabs require JavaScript for the interactive behavior (switching panels, keyboard navigation). However, the content is rendered server-side, so it's available to crawlers and screen readers even before hydration.

Components

React Navigation Components

Tabs, accordions, breadcrumbs, pagination, and steppers — all with Radix-powered keyboard navigation and ARIA compliance.

import { Tabs, Accordion, Breadcrumb, Pagination, Stepper } from "@ninna-ui/navigation";

<Tabs>
  <Tabs.List>
    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="overview">Content</Tabs.Content>
  <Tabs.Content value="settings">Settings</Tabs.Content>
</Tabs>

Key features

Tabs with arrow-key navigation and ARIA tablist semantics

Accordion with single or multi-open modes

Breadcrumbs with structured data support

Pagination with keyboard navigation

Stepper for multi-step flows

All components use Radix UI primitives

Keyboard-accessible navigation

Navigation components are critical for accessibility. Ninna UI's Tabs component implements the full WAI-ARIA tablist pattern: Tab and Shift+Tab move between tabs, arrow keys switch tabs, and the active tab is announced to screen readers.

Accordion implements the WAI-ARIA accordion pattern with Up/Down arrow navigation, Home/End to jump to first/last item, and proper aria-expanded states.

Component Docs

Tabs Accordion Breadcrumbs Pagination