Navigation v1.1.0

Tabs

Accessible tabbed interface for organizing content into panels. Available in multiple visual styles with full keyboard navigation.

Underline

Clean underlined tabs with a bottom border indicator

Options

Name Type Default Description
tabs * Array required Array of tab hashes with :id, :label, and optional :content
default_tab Integer 0 Index of the initially selected tab
class String "" Additional CSS classes for the container

Pills

Pill-shaped tab buttons with rounded backgrounds

Options

Name Type Default Description
tabs * Array required Array of tab hashes with :id, :label, and optional :content
default_tab Integer 0 Index of the initially selected tab
class String "" Additional CSS classes for the container

Boxed

Card-style tabs with bordered container

Options

Name Type Default Description
tabs * Array required Array of tab hashes with :id, :label, and optional :content
default_tab Integer 0 Index of the initially selected tab
class String "" Additional CSS classes for the container

Changelog v1.1.0

- v1.1.0: Added multiple style variants (underline, pills, boxed)
- v1.0.0: Initial release with horizontal tabs
- Full keyboard accessibility (arrow keys, home/end)
- Stimulus controller for state management

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now