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

# Button Nav

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

The `AwButtonNav` component is a navigation component that extends `AwTabNav` with button-style navigation.

## Overview

`AwButtonNav` provides button-style navigation tabs. It extends `AwTabNav` and uses the same API but with button-specific styling.

## Usage

### Basic Example

```markup
<AwButtonNav :items="navItems" v-model="activeTab" />
```

### With Query Parameters (Filtering)

`AwButtonNav` is commonly used for filtering list pages by updating URL query parameters:

```markup
<template>
    <AwPage title="Services">
        <AwButtonNav :items="filterItems" class="mb-6" />

        <AwTableBuilder
            :collection="services"
            :watch-params="['is_active']"
        >
            <AwTableCol field="name" title="Service" />
        </AwTableBuilder>
    </AwPage>
</template>

<script>
export default {
    computed: {
        filterItems() {
            return [
                {
                    text: 'Active',
                    href: { query: { is_active: null } }
                },
                {
                    text: 'Inactive',
                    href: { query: { is_active: '0' } }
                }
            ]
        }
    }
}
</script>
```

**Key points:**
- Use `href: { query: { param: value } }` to update query parameters
- Setting `param: null` removes the parameter from URL (shows unfiltered results)
- Setting `param: 'value'` adds the parameter to URL
- Works with `AwTableBuilder`'s `:watch-params` to automatically refetch data

See [List Pages Guide](../../guides/page-patterns/list-pages.md#button-nav-filtering) for complete filtering examples.

### With Icons

```markup
<AwButtonNav
    :items="[
        {
            text: 'Active',
            icon: 'awesio/check-circle',
            href: { query: { is_active: null } }
        },
        {
            text: 'Inactive',
            icon: 'awesio/x-circle',
            href: { query: { is_active: '0' } }
        }
    ]"
/>
```

See `AwTabNav` documentation for complete usage examples and API details.

## API

`AwButtonNav` extends `AwTabNav` and supports all its props, slots, and events. See [AwTabNav documentation](aw-tab-nav.md) for complete API reference.

The component uses `aw-button-nav` as the base CSS class instead of `aw-tab-nav`.

## Related Components

- `AwTabNav` - Base tab navigation component
- `AwButton` - Button component
- `AwLink` - Link component

## Notes

- **Import Method:** Global - Available as molecule component
- Extends `AwTabNav` with button-specific styling
- Uses same API as `AwTabNav` - see that component's documentation for details
- Base CSS class is `aw-button-nav`