---
metaTitle: Layout component | AwesCode UI
meta:
  - name: description
    content: The <AwLayout /> is a layout with left sidebar navigation for AwesCode UI.
title: Layout
---

# AwLayout

**Category:** Layout | **Import:** Dynamic

The `AwLayout` component is the default layout with left sidebar navigation. It provides the main application layout structure with navigation menu, header notifications, and content area.

## Overview

`AwLayout` provides the default application layout with:
- Left sidebar navigation (desktop)
- Header notifications
- Content area
- Responsive design
- Menu integration with Vuex store

## Usage

### Basic Example

```markup
<AwLayout>
    <AwPage>
        <h1>Page Content</h1>
    </AwPage>
</AwLayout>
```

### With Custom Slots

```markup
<AwLayout>
    <template #before-header>
        <AwBanner>Custom banner</AwBanner>
    </template>
    
    <template #navbar>
        <CustomNavbar />
    </template>
    
    <AwPage>
        <h1>Page Content</h1>
    </AwPage>
</AwLayout>
```

## API

### Props

This component does not have props. Menu is managed via Vuex store (`awesIo` module).

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Main content area | - | - |
| before-header | Content before header | - | - |
| navbar | Custom navbar content | - | Default navbar |

### Events

This component does not emit custom events.

## Related Components

- `AwLayoutProvider` - Layout provider component (used internally)
- `AwLayoutMenu` - Sidebar menu component
- `AwHeaderNotification` - Header notification component
- `AwPage` - Page component (typically used in default slot)

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as a layout
- Menu is managed via Vuex store (`awesIo` module)
- Sidebar navigation only shows on desktop (`$screen.lg`)
- Mobile menu is commented out in current implementation
- Component uses `AwLayoutProvider` for layout structure
- Header notifications are automatically displayed
- All slots are proxied to layout menu component
- Component provides responsive layout structure