Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
Components Navigation

Navigation

 Overview API Examples Style Tokens

The Navigation component is a versatile container that supports both tab-style navigation and link-based navigation with overflow handling and RTL support.

Basic usage

The Navigation component can be implemented in two modes using different selectors:

Component anatomy

Choose between two navigation styles using the component selector:

  • Tablist: Traditional tab interface with tab role
  • Links: Link-based navigation with navigation role

Each mode maintains appropriate ARIA roles and keyboard behavior.

Items can be configured with:

  • Label text
  • Notification count badge
  • Disabled state with tooltip
  • Custom content projection
  • Active state indication

Overflow Behavior

Handles content overflow with:

  • Smooth horizontal scrolling
  • Previous/Next navigation buttons
  • Gradient indicators for overflow
  • RTL support for scroll direction
  • Active item auto-scrolling

Active Indicator

Visual indication of active item through:

  • Underline animation
  • Color changes
  • Smooth transitions
  • Position tracking

State Management

Control navigation state using:

  • activeItem model for current selection
  • Selection change events
  • Disabled state management
  • Focus tracking
  • Keyboard navigation

Negative Theme

Enable dark theme support using the negative Input, affecting:

  • Background colors
  • Text colors
  • Active indicators
  • Overflow gradients
  • Focus indicators

Accessibility

Keyboard Navigation

Comprehensive keyboard support:

  • Left/Right arrows for tab navigation
  • Tab key for link navigation
  • Enter/Space for activation
  • Focus management during scrolling
  • RTL keyboard adaptation

ARIA Implementation

Mode-specific ARIA support:

  • Tablist/Tab roles for tab mode
  • Navigation/Link roles for link mode
  • Selected state indication
  • Disabled state management
  • Notification announcements

Focus Management

Careful focus handling:

  • Visible focus indicators
  • Focus retention during scrolling
  • Logical tab order
  • Active item tracking
  • Disabled state focus handling

Best Practices for Developers

  1. Mode Selection DEMO HERE

  2. Content Organization DEMO HERE

  3. Overflow Handling DEMO HERE

Previous
Modal Dialog
Next
Notification