tabstyle

Tabstyle refers to the visual design and interaction model of tabbed navigation within software interfaces. It covers how tabs are presented, how the active tab is indicated, and how the content associated with each tab is displayed or swapped.

A typical tabstyle uses a tablist structure with role="tablist", individual tabs with role="tab", and corresponding content panels. The currently active tab has aria-selected="true" and its panel is shown while others are hidden. An indicator, such as an underline or a highlighted pill, visually marks the selected tab. Keyboard accessibility is central: users should navigate with left and right arrows (and Home/End to jump) and activate a tab with Enter or Space.

Visual variants of tabstyle include horizontal versus vertical tab bars, text-only, icon-only, or icon-with-label tabs, and different treatments such as filled, outlined, or ghost appearances. Tab indicators may be simple underlines, rounded pills, or color blocks. Designs must consider responsive behavior, often offering scrollable overflow, collapsible menus, or adaptive stacking on small screens. Theming support commonly relies on design tokens or CSS variables to adjust color, height, curvature, and spacing across platforms.

Implementation considerations include choosing HTML structure, managing active state (via CSS alone or with JavaScript), and ensuring compatibility with assistive technologies. The use of CSS variables facilitates consistent theming, while ARIA attributes and proper focus management promote accessibility. Developers balance aesthetics with readability and performance, aiming for a clear hierarchy, predictable behavior, and quick content switching.

Related concepts include tab bars, segmented controls, and tab panels, all contributing to organized, efficient access to grouped content.