---
metaTitle: Tab nav component | AwesCode UI
meta:
  - name: description
    content: The <AwTabNav /> component is used to render Tab nav - UI Vue component for AwesCode UI.
title: Tab Nav
---

# Tab Nav

**Category:** Molecule | **Import:** Global

The `AwTabNav` component provides horizontal tab navigation with support for routing and button-based tabs.

## Overview

`AwTabNav` creates a horizontal scrolling tab navigation that supports both router links and button-based tabs. It includes icons, badges, and automatic scrolling to the active tab.

## Usage

### Basic Example with Strings

```markup
<AwTabNav :items="['Tab 1', 'Tab 2', 'Tab 3']" v-model="activeTab" />
```

### With Objects

```markup
<AwTabNav 
    :items="[
        { text: 'Home', route: { name: 'home' } },
        { text: 'About', route: { name: 'about' } }
    ]" 
/>
```

### With Icons and Badges

```markup
<AwTabNav 
    :items="[
        { text: 'Messages', icon: 'message', badge: { text: '5' } },
        { text: 'Notifications', icon: 'bell', badge: { text: '3' } }
    ]" 
/>
```

### Custom Tab Content

```markup
<AwTabNav :items="items" v-model="activeTab">
    <template #default="{ text, icon, isActive }">
        <div :class="{ active: isActive }">
            {{ text }}
        </div>
    </template>
</AwTabNav>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| items | Array of tab objects or strings | `Array` | `true` | - |
| active | Active tab index (for button tabs) | `Number` / `Array` | `false` | - |

Tab object properties:
- `text` - Tab text (required)
- `route` - Router route object (for navigation)
- `icon` - Icon name or object
- `badge` - Badge object or props
- `hideText` - Hide text, show only icon
- `disabled` - Disable tab
- Other link/button props

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom tab content | `{ text, key, route, isActive, icon, badge, ...item }` | Default tab button/link |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| update:active | `index` | Emitted when active tab changes (for v-model) |

## Related Components

- `AwButtonNav` - Button-style navigation (extends AwTabNav)
- `AwSlider` - Horizontal slider container
- `AwIcon` - Icon component
- `AwBadge` - Badge component

## Notes

- **Import Method:** Global - Available as molecule component
- Uses `AwSlider` for horizontal scrolling
- Automatically scrolls to active tab
- Supports router links (when `route` is provided) or buttons
- Icons and badges are supported in tab items
- Can hide text to show icon-only tabs
- Supports custom modifiers for styling (expand, fullwidth, etc.)