Standard Tabs
The default text-only tab strip. Reach for this when labels alone are enough to distinguish the panels and you want the broadest layout flexibility across vertical, divider, and card views.
Welcome
Welcome to our platform. Here you'll find the latest updates and important information about our services and offerings.
This is the main dashboard where users can quickly access key features and get an overview of their account status.
Getting Started
Explore the available services, review your recent activity, or configure your account preferences from the tabs above.
- Browse available government services
- Track your application status
- Manage your profile and notifications
With Leading Icons
Icons before each label help users scan and identify tabs quickly
Dashboard
Your main dashboard with key metrics and quick access to important features.
Built-in Features
Activates when .nds-tabs is on the page. Tab switching, keyboard handling, and scroll behavior attach automatically.
Arrow keys move between tabs, Home and End jump to first and last, and Enter or Space activates the focused tab.
Arrow key direction reverses automatically in RTL layouts so navigation always feels natural to the reading direction.
Long tab lists scroll horizontally with gradient fade indicators, drag-to-scroll, mouse wheel support, and a show-more button.
Add nds-vertical for a side-stacked tab list with sticky positioning and vertical indicator bars.
Enhanced borders appear in high-contrast mode, and all transitions are disabled when the user prefers reduced motion.
Every tab switch dispatches an nds:tab:change event with the new and previous tab and panel references.
Switch tabs, query the active panel, or destroy instances through the JS API on NDS.Tabs or each element's .ndsTabs property.
Usage Guidelines
Best Practices
- Use tabs to organize related content that users access one section at a time, such as settings categories, service details, or dashboard views
- Use tabs for content that benefits from quick comparison, where switching between panels helps users evaluate options without leaving the page
- Use vertical tabs when the tab list is long or when labels need more space, such as multi-step configuration panels or category navigation
- Do not use tabs for sequential workflows where the user must complete steps in order. Use a Stepper instead
- Do not use tabs for simple content that fits on one page without segmentation. Unnecessary tabs add interaction cost
- Do not use tabs for a small set of short, equal-weight views of the same data, such as a date range or a status filter. Use a Content Switcher, which fills the current segment so the choice reads at a glance
- Choose card view when tabs appear inside a content area that already has a background, to visually contain the tab group
- Add the divider modifier when you need a clear visual boundary between the tab list and the panel content
- Keep tab labels short (one to three words). Long labels cause excessive scrolling in horizontal layouts
- Add icons to tabs when they represent distinct categories that benefit from visual differentiation, but avoid icons on text-heavy labels where they add clutter
- Aim for three to seven visible tabs. Beyond that, the overflow scroll mechanism handles the rest, but users may not discover hidden tabs easily
- Structure tab panel content using
nds-blockwithnds-block-titleheadings. Multiple content blocks per panel create clear visual sections within a single tab - Place the most frequently accessed tab first, as it becomes the default active panel on page load
Modifier Classes
| Class | Description |
|---|---|
nds-vertical |
Switches to a side-stacked vertical tab layout with sticky positioning |
nds-divided |
Adds a divider line between the tab list and panel content |
nds-center |
Centers the tab list horizontally within the container |
nds-sm |
Drops the tab height to 32px and pins the label to the small type step. Tab sizing runs one rung above the button ladder: 32 / 40 / 48 against a button's 24 / 32 / 40 |
nds-lg |
Raises the tab height to 48px for a larger touch target. The unmodified default is 40px, so no class is needed for the middle step |
nds-card nds-stroke nds-shadow |
Wraps the tab group in a card container with border and shadow |
nds-loading |
Activates the processing skeleton: tab label bars animate and panel children hide. On .nds-tabs or .nds-tab-list. Equivalent to data-state="loading" |
Data Attributes
| Attribute | Description |
|---|---|
data-state="loading" |
Set on .nds-tabs or .nds-tab-list to activate the processing skeleton. Tab label bars animate and panel children hide until the attribute is removed. Equivalent to adding the nds-loading class |
data-nds-tabs-initialized |
Stamped on .nds-tabs by JS after initialization. The pre-init skeleton (automatic label bars) is active on any .nds-tabs that lacks this attribute, so the strip is never visually bare before JS runs |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--scroll-fade |
48px | Width of the gradient fade at the edges of an overflowing tab list (set on the inner .nds-scroll-more) |
--btn-indicator-size |
3px | Thickness of the active tab indicator bar and divider line |
--tab-button-gap |
var(--spacing-xs) |
Gap between a tab's icon and its label |
--tab-button-padding-block |
0 |
Vertical padding inside each tab button. Zero by default so the tab stands exactly at its size step |
--tab-button-padding-inline |
the button's own padding | Horizontal padding inside each tab button. Falls back to the button default, so it tracks the size step: 12px at nds-sm, 16px default, 20px at nds-lg |
JavaScript API
The NDS.Tabs API provides methods to create, switch, and query tab instances. Each initialized .nds-tabs element stores its instance on the .ndsTabs DOM property. The same controller drives the Content Switcher, so everything below applies to a switcher instance too.