Left Liquid Background
Right Liquid Background

Navigation Pills

The Navigation Pills preset offers a compact tab-like navigation system styled as rounded pills. It is ideal for segmenting content categories or toggling views.

Quick Links

Installation

Install the presets individually or as part of the complete @aristobyte-ui library.

Installation of Navigation Pills

Install the Navigation Pills preset individually. Skip if @aristobyte-ui is already available globally.

Package Manager

Individual Package

Install only the presets if you need specific functionality.

Full Library

Skip this if you have the complete @aristobyte-ui already installed.

Import

Choose between individual package imports or global library imports based on your project's needs and bundle size requirements.

Import Navigation Pills

Import Navigation Pills to enable users to switch between grouped sections. Variants allow semantic styling and highlight current selection.

Import Method

;

Individual Package

Import directly from the presets package for optimal tree-shaking and smaller bundle sizes.

Recommended for component-specific usage

Global Library

Import from the main library package when using multiple components from AristoByte UI.

Recommended for component-specific usage

Basic Usage Example

Basic implementation of the component using default properties. Suitable for general-purpose interactions.

Disabled

Shows Navigation Pills in a disabled state when navigation targets are not available, the user lacks permissions, or the view is temporarily locked.

Preview

Guidelines

    Navigation Constraints

  • Disable pills for routes that are not yet released or are behind feature flags.

  • Disable navigation when prerequisites (e.g., onboarding steps) are incomplete.

  • Use disabled pills to surface roadmap items without allowing navigation yet.

  • Avoid disabling the currently active pill; instead disable only non-applicable targets.

    Accessibility & Messaging

  • Provide accessible names and a tooltip explaining why a pill is disabled (e.g., 'Requires Pro plan').

  • Maintain focusability semantics: disabled pills should not receive interactive focus but remain discoverable.

  • Consider progressive disclosure: enable a read-only preview when full navigation is disabled.

  • Instrument disabled pill clicks to measure user intent and prioritize unblock workflows.

Props Reference

Complete reference for all props available on NavigationPills component(s), including type definitions, default values, and usage examples.

  • NavigationPills

    • Core Props

      • children

        React.ReactNode | stringdefault: ''

Viewing Unit with ID navigation-pills