---
metaTitle: BottomBar component | AwesCode UI
meta:
  - name: description
    content: The <AwBottomBar /> component displays a fixed bottom action bar - UI Vue component for AwesCode UI.
title: BottomBar
---

# AwBottomBar

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

The `AwBottomBar` component displays a fixed action bar at the bottom of the screen, commonly used for mobile navigation or persistent actions.

## Overview

- Fixed bottom positioning
- Action buttons
- Mobile-optimized
- Responsive visibility

## Usage

### Basic Example

```markup
<AwBottomBar>
  <AwButton>Save</AwButton>
  <AwButton color="mono">Cancel</AwButton>
</AwBottomBar>
```

### With Navigation

```markup
<AwBottomBar>
  <AwButton href="/" icon="awesio/home">Home</AwButton>
  <AwButton href="/search" icon="awesio/search">Search</AwButton>
  <AwButton href="/profile" icon="awesio/user">Profile</AwButton>
</AwBottomBar>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| visible | Show/hide bar | `Boolean` | `false` | `true` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Bar content | - | - |

## Related Components

- [AwPageMenuButtons](aw-page-menu-buttons.md) - Page action buttons

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as organism
- Fixed to bottom of viewport
- Adds padding to body to prevent content overlap
- Typically used on mobile devices