---
metaTitle: Subnav component | AwesCode UI
meta:
  - name: description
    content: The <AwSubnav /> component provides sub-navigation menus - UI Vue component for AwesCode UI.
title: Subnav
---

# AwSubnav

**Category:** Organism | **Import:** Dynamic

The `AwSubnav` component provides secondary navigation menus typically used within a section or page.

## Usage

### Basic Example

```markup
<template>
    <AwPage title="Settings">
        <AwSubnav
            title="Settings"
            :children="[
                { text: 'Overview', href: '/settings' },
                { text: 'Profile', href: '/settings/profile' },
                { text: 'Security', href: '/settings/security' },
                { text: 'Notifications', href: '/settings/notifications' }
            ]"
        />
    </AwPage>
</template>
```

### Dynamic Children from Menu

```markup
<template>
    <AwPage :title="headline">
        <AwSubnav
            v-if="items.length"
            :title="subnavTitle"
            :children="items"
        />
    </AwPage>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    computed: {
        ...mapGetters('awesIo', ['mainMenu']),

        menuItem() {
            // Find menu item by key
            return this.mainMenu.find(item => item.key === 'settings') || {}
        },

        items() {
            return this.menuItem.children || []
        },

        subnavTitle() {
            return this.menuItem.text || 'Navigation'
        },

        headline() {
            return this._getTitle(this.subnavTitle)
        }
    }
}
</script>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| title | Navigation section title | `String` | `false` | `null` |
| children | Navigation items (preferred name) | `Array` | `false` | `[]` |
| items | Navigation items (legacy alias) | `Array` | `false` | `[]` |

**Item Structure:**
```javascript
{
  text: String,      // Link text (required)
  href: String,      // Link URL (required)
  icon: String,      // Optional icon name
  active: Boolean    // Active state (auto-detected if not provided)
}
```

### Behavior

- **Active Detection**: Automatically highlights the active item based on current route
- **Auto-loading Children**: If `children` prop is not provided, attempts to get children from the active menu item via layout provider
- **Mobile-First**: Designed for mobile navigation, but works on all screen sizes

## Related Components

- [AwTabNav](aw-tab-nav.md) - Tab navigation

## Mobile Subnavigation

`AwSubnav` is commonly used to create mobile-only navigation hubs for sections with submenu items. On mobile, users see a dedicated navigation page, while desktop users are automatically redirected to the first child page.

**See the complete guide:** [Mobile Subnavigation Pattern](../../guides/mobile-subnavigation.md)

The guide covers:
- Menu configuration with dynamic `href` functions
- Creating index pages with automatic desktop redirects
- Adding mobile-only breadcrumbs to child pages
- Complete working example

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as organism
- Automatically highlights active item based on current route
- If `children` prop is not provided, `AwSubnav` will try to get children from the active menu item via layout provider