---
metaTitle: Page component | AwesCode UI
meta:
  - name: description
    content: The <AwPage /> general container for internal pages in AwesCode UI.
title: Page
---

# AwPage

**Category:** Page | **Import:** Dynamic

The `AwPage` component is a top-level page container that provides a structured layout with header, breadcrumbs, title, subnavigation, content area, and optional bottom bar. It's the primary component for building pages in the application.

## Overview

`AwPage` provides a complete page structure with:
- Page header with title and breadcrumb navigation
- Optional subnavigation tabs
- Flexible content container (default, small, full)
- Fullscreen mode support
- Mobile-responsive layout with sticky header
- Bottom bar for mobile devices
- Aside content area support
- Integration with Vuex store for navigation state

## Usage

### Basic Example

```markup
<AwPage title="Page Title">
    <p>Page content goes here</p>
</AwPage>
```

### With Breadcrumb

```markup
<AwPage 
    title="Page Title"
    :breadcrumb="{ href: '/overview', title: 'Overview' }"
>
    <p>Page content</p>
</AwPage>
```

### With Subnavigation

```markup
<AwPage 
    title="Page Title"
    :subnav="[
        { href: '/page/tab1', title: 'Tab 1' },
        { href: '/page/tab2', title: 'Tab 2' }
    ]"
>
    <p>Page content</p>
</AwPage>
```

### With Buttons Slot

```markup
<AwPage title="Page Title">
    <template #buttons>
        <AwButton icon="plus" cta>Create</AwButton>
        <AwButton>Settings</AwButton>
    </template>
    
    <p>Page content</p>
</AwPage>
```

### With Custom Container

```markup
<AwPage title="Page Title" container="small">
    <p>Content in small container</p>
</AwPage>

<AwPage title="Page Title" container="full">
    <p>Content in full-width container</p>
</AwPage>
```

### With Aside Content

```markup
<AwPage title="Page Title">
    <template #default>
        <p>Main content</p>
    </template>
    
    <template #aside>
        <AwCard title="Sidebar">Sidebar content</AwCard>
    </template>
</AwPage>
```

### Fullscreen Mode

```markup
<AwPage title="Page Title" :fullscreen="isFullscreen">
    <p>Fullscreen content</p>
</AwPage>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| title | Main headline on the page | `String` | `false` | `''` |
| metaTitle | Meta title for SEO (uses `title` if not provided) | `String` | `false` | `''` |
| titleTag | HTML tag for title element | `String` | `false` | `'h1'` |
| breadcrumb | Breadcrumb object with `href` and `title` | `Object` | `false` | `null` |
| subnav | Subnavigation items array | `Array` | `false` | `[]` |
| fullscreen | Enable fullscreen mode | `Boolean` | `false` | `false` |
| container | Container size: `'default'`, `'small'`, or `'full'` | `String` | `false` | `'default'` |
| headerContainer | Container size for header (overrides `container`) | `String` | `false` | `null` |
| hideBottomBar | Hide mobile bottom bar | `Boolean` | `false` | `null` (auto) |
| buttonsBreakpoint | Breakpoint for button visibility | `String` | `false` | `'lg'` |
| breadcrumbMenu | Show menu toggle in breadcrumb area | `Boolean` | `false` | `undefined` |

**Breadcrumb Object:**
```javascript
{
  href: '/path',  // Required
  title: 'Back'   // Optional
}
```

**Subnav Items:**
```javascript
[
  { href: '/path', title: 'Tab Title' },
  // ... more items
]
```

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Main page content | - | - |
| aside | Sidebar content (enables aside layout) | - | - |
| heading | Custom header (replaces default) | `{ titleTag, title, breadcrumb }` | Default header |
| title | Custom title content | `{ title, titleShowable, hideTitle }` | Default title |
| buttons | Header buttons area | - | - |
| subnav | Custom subnavigation | `{ subnav }` | Default `AwTabNav` component |
| headline-breadcrumb | Custom breadcrumb button | - | Default back button |
| after-breadcrumb | Content after breadcrumb | - | - |
| mobile-title | Mobile title display | `{ title }` | Title text |
| bottom-bar | Custom bottom bar | - | Default `AwBottomBar` component |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| update:fullscreen | `Boolean` | Emitted when fullscreen state changes |

### Config Options

The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:

```javascript
export default {
  AwPage: {
    titleTag: 'h1'  // Default HTML tag for title
  }
}
```

## Related Components

- `AwPageHeader` - Internal header component
- `AwTabNav` - Tab navigation component (used for subnav)
- `AwBottomBar` - Bottom bar component for mobile
- `AwButton` - Button component for header actions

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as a page component
- Breadcrumb automatically uses `backRoute` from Vuex store if available
- On mobile, breadcrumb area shows menu toggle if no breadcrumb is provided
- Header becomes sticky on mobile when scrolling
- Fullscreen mode uses native Fullscreen API with fallback
- Bottom bar is automatically hidden if breadcrumb is present
- Container classes: `container` (default), `container-small`, `container-fluid` (full)
- Component provides `teleportButtonsTo` context for button teleporting
- Uses `page` mixin for scroll watching and header stickiness
- Integrates with `$screen` for responsive behavior