Tab Navigation

Guidelines
React API Reference
Blazor API Reference

Tab navigation components provide a way to organize and switch between different application views, offering users clear visual hierarchy and easy navigation between related pages.

Guidance

Aspect	Best Practice
Usage	Use for primary navigation between related views. Ideal for organizing content into logical groups.
Content	Use clear, concise labels that accurately describe the content or functionality of each tab. Keep labels short and scannable.
Behavior	Provide clear visual indication of the active/selected tab. Support keyboard navigation and maintain consistent behavior across the application.
States	Clearly distinguish between active, inactive, disabled, and hover states. Ensure sufficient contrast for accessibility.
Hierarchy	Use tab navigation for primary sections. Avoid nesting multiple levels of tabs as it can create confusion.
Examples	Dashboard sections, settings categories, product details (overview, specs, reviews), or any application with distinct but related sections.

Best Practices

Clear Labeling: Use descriptive, concise labels that clearly indicate what content each tab contains.
Logical Grouping: Organize tabs in a logical order based on user workflow or importance.
Visual Hierarchy: Make the active tab clearly distinguishable from inactive tabs.
Consistent Placement: Keep tab navigation in a consistent location throughout the application.
Responsive Design: Ensure tabs work well on different screen sizes, consider scrollable tabs on mobile.
Keyboard Accessibility: Support arrow key navigation between tabs and proper focus management.

Do’s and Don’ts

Do

Use for primary navigation between related page sections. * Keep tab labels short, clear, and descriptive. * Provide clear visual indication of the active tab. * Support keyboard navigation between tabs.

Don't

Nest multiple levels of tab navigation. * Use too many tabs that don’t fit comfortably in the available space. * Change the tab order or labels frequently as it confuses users.

Additional Guidance

Psychological Impact:
- Mental Model: Tabs provide a familiar metaphor similar to physical file folders, making navigation intuitive.
- Context Preservation: Users maintain awareness of all available sections while focusing on the current one.
- Efficient Switching: Quick visual scanning and single-click access between related content areas.

Import

import {
TabNav,
TabNavLink
} from '@strongtie/design-system/tabnav';

Usage

<TabNav>
  <TabNavLink href="/" selected>Home</TabNavLink>
  <TabNavLink href="/orders">Orders</TabNavLink>
  <TabNavLink href="/employees">Employees</TabNavLink>
  <TabNavLink href="/customers">Customers</TabNavLink>
</TabNav>

`<TabNavLink>` Props

href

string

required

The URL that the link points to.

selected

boolean

default:"false"

Whether this navigation link is selected/active.

disabled

boolean

default:"false"

Whether this navigation link is disabled.

Usage Examples

<TabNav>
  <TabNavLink href="/" selected>Home</TabNavLink>
  <TabNavLink href="/orders">Orders</TabNavLink>
  <TabNavLink href="/employees">Employees</TabNavLink>
  <TabNavLink href="/customers">Customers</TabNavLink>
</TabNav>

Styling Classes

The following CSS classes are applied by the Tab Navigation components:

tab-nav-list – Root list container for navigation tabs
tab-nav-item – Individual tab list item wrapper
tab-nav-link – Tab link element with interactive states
tab-nav-title – Text content within each tab link

For more examples, visit the Storybook.

Example

<StudsTabNav>
    <StudsTabNavLink Text="Home" Href="/" Selected="true" />
    <StudsTabNavLink Text="Orders" Href="/orders" />
    <StudsTabNavLink Text="Employees" Href="/employees" />
    <StudsTabNavLink Text="Customers" Href="/customers" />
</StudsTabNav>

`StudsTabNav` Parameters

ChildContent

RenderFragment

Gets or sets the child content containing the tab navigation links.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`StudsTabNavLink` Parameters

Text

string

Gets or sets the text content of the navigation link.

Href

string

Gets or sets the URL that the link points to.

Selected

bool

default:"false"

Gets or sets whether this navigation link is selected.

Disabled

bool

default:"false"

Gets or sets whether this navigation link is disabled.

Visible

bool

default:"true"

Gets or sets whether this navigation link is visible.

Style

string

Gets or sets additional CSS styles for the navigation link.

Attributes

IDictionary<string, object>

Gets or sets additional attributes for the navigation link element.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

Usage Examples

<StudsTabNav>
    <StudsTabNavLink Text="Home" Href="/" Selected="true" />
    <StudsTabNavLink Text="Orders" Href="/orders" />
    <StudsTabNavLink Text="Employees" Href="/employees" />
    <StudsTabNavLink Text="Customers" Href="/customers" />
</StudsTabNav>

Styling Classes

The following CSS classes are applied by the Tab Navigation components:

tabnav – Root tab navigation container
tabnav-nav – List container for navigation items with proper ARIA roles
tabnav-title – Text content within each tab link

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

Tab Navigation

Guidance

Best Practices

Do’s and Don’ts

Do

Don't

Additional Guidance

`<TabNavLink>` Props

Usage Examples

Styling Classes

`StudsTabNav` Parameters

`StudsTabNavLink` Parameters

Usage Examples

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​Guidance

​Best Practices

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​<TabNavLink> Props

​Usage Examples

​Styling Classes

​StudsTabNav Parameters

​StudsTabNavLink Parameters

​Usage Examples

​Styling Classes

Guidance

Best Practices

Do’s and Don’ts

Additional Guidance

`<TabNavLink>` Props

Usage Examples

Styling Classes

`StudsTabNav` Parameters

`StudsTabNavLink` Parameters

Usage Examples

Styling Classes