Our nav tabs provide a simple and efficient way to organize and navigate between multiple content sections within the same page. By dividing related information into distinct tabs, it helps reduce visual clutter and improves content discoverability without requiring users to leave the current view. This component is especially useful in scenarios where users need to compare or switch between data sets, settings or categories. It supports both horizontal and stacked layouts, ensuring adaptability across different use cases and screen sizes.
- 1.Container: the outer wrapper that holds and organizes all tab items. It defines the overall structure and layout of the navigation tabs, ensuring proper alignment and spacing across the component.
- 2.Label: the text displayed within each tab that indicates the section or category it leads to.
- 3.Notification badge (Optional): a visual indicator that displays the number of pending actions, alerts or updates related to a specific tab.
- 4.Selected tab: the active tab currently in focus, representing the visible content section. It is visually distinguished from unselected tabs using different color, weight or indicator styling.
- 5.Icon (Optional): an optional graphical element placed before the label to visually reinforce the tab's meaning or category.
- 6.Selected tab indicator: a horizontal bar that visually marks the currently active tab.
- 7.Unselected tab indicator: a horizontal bar that visually marks the currently inactive tab.
Icons in nav tabs can be placed either above or to the left of the label, depending on the layout and density of the interface.
- Use the top position when the tabs are displayed in a horizontal layout and you want to emphasize the icon as a key visual cue—ideal for dashboards or mobile-first interfaces where vertical stacking feels more natural.
- Place the icon to the left of the label in more compact environments, especially when space is limited. This configuration maintains readability while preserving a clean, organized structure.
Choose the position that best aligns with the visual hierarchy and user flow of your application.
Nav tabs can optionally include a notification badge to indicate new activity, alerts, or content updates related to that tab. These badges are typically displayed as small counters and serve as a visual prompt to draw the user's attention to something that requires their interaction or awareness. Use notification badges sparingly and only when there is a clear need to highlight important changes—such as unread messages, pending actions or system alerts—to avoid visual noise and ensure they retain their impact.
Both tabs and nav tabs are used for navigation, but they serve different purposes and function in distinct ways.
Nav tabs
- Act as primary navigation elements, often leading to different pages or sections of an application.
- Clicking on a nav tab may trigger a full page reload or route change.
Tabs
- Used to switch between different content sections within the same page or container.
- Typically do not trigger a full page reload but update content dynamically.
Both components improve usability, but tabs are best for grouping related content within a page, while nav tabs help users move across different sections or pages of an application.
- Use nav tabs to group related content or views under a shared context, making it easier for users to switch between them without losing orientation.
- Keep nav tab items labels short and descriptive to avoid truncation and maintain clarity, especially on smaller viewports.
- Ensure that tabs follow a logical order—based on frequency of use, workflow, or user priority.
- Use notification badges to highlight relevant updates only when necessary, and avoid overloading multiple tabs with badges at once.
- While the component is flexible enough to support a mix of label-only and label-with-icon tabs, it's best to choose one style per set. Mixing both can reduce scannability and create visual imbalance, impacting the overall usability.
- Choose icon placement (left or top) based on the available space and the importance of the icon in the context of the label. Left is preferred for horizontal layouts; top works best in vertical or space-constrained scenarios.
- Avoid mixing navigation tabs and action buttons within the same group, as this can create confusion around expected behavior.