---
metaTitle: PageMenuButtons component | AwesCode UI
meta:
  - name: description
    content: The <AwPageMenuButtons /> component renders page action buttons with responsive behavior - UI Vue component for AwesCode UI.
title: PageMenuButtons
---

# AwPageMenuButtons

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

The `AwPageMenuButtons` component displays page action buttons with responsive behavior. On desktop, buttons are shown expanded; on mobile, CTA buttons become fixed floating buttons and others go into a context menu dropdown.

## Overview

`AwPageMenuButtons` provides responsive page actions with:
- Desktop: Full buttons displayed expanded
- Mobile: CTA buttons as fixed floating buttons, others in dropdown
- Context menu for non-CTA buttons
- Download button handling with loading states
- Teleport/portal support for fixed buttons
- Scroll-based expand/collapse animation
- Conditional visibility support
- Tooltip support

## Usage

### Basic Example

```markup
<AwPageMenuButtons
  :items="[
    { text: 'Save', cta: true, href: '/save' },
    { text: 'Edit', href: '/edit', icon: 'edit' },
    { text: 'Delete', href: '/delete', icon: 'trash' }
  ]"
/>
```

### With Download Button

```markup
<AwPageMenuButtons
  :items="[
    { text: 'Download PDF', download: 'pdf', href: '/api/download', icon: 'download', cta: true }
  ]"
/>
```

### With Conditional Visibility

```markup
<AwPageMenuButtons
  :items="[
    { text: 'Edit', cta: true, href: '/edit', show: (vm) => vm.$can('edit', 'post') },
    { text: 'Delete', href: '/delete', show: false }
  ]"
/>
```

### Custom Breakpoint

```markup
<AwPageMenuButtons
  :items="buttons"
  breakpoint="xl"
  teleport-fixed-to=".custom-container"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| items | Array of button configurations | `Array` | `false` | `[]` |
| breakpoint | Screen breakpoint for expanded/collapsed state | `String` | `false` | `'lg'` |
| teleportFixedTo | Target selector for fixed buttons teleport | `String` | `false` | `'body'` |
| expandOffset | Max scroll distance for expanded fixed buttons (px) | `Number` | `false` | `150` |
| showContextMenuTextFrom | Breakpoint to show context menu text | `String` | `false` | `'lg'` |
| iconVertical | Vertical icon orientation in context menu | `Boolean` | `false` | `false` |

### Button Item Structure

Each item in the `items` array can have these properties:

```javascript
{
  text: String,            // Button text
  icon: String,            // Icon name
  href: String,            // Link URL
  cta: Boolean,            // Call-to-action (primary button, shows as fixed on mobile)
  download: String,        // File type for download ('pdf', 'csv', etc.)
  tooltip: String,         // Tooltip text
  show: Boolean|Function,  // Visibility (can be function receiving component instance)
  listeners: Object,       // Custom event listeners
  // ... any other AwButton props
}
```

### Slots

This component does not have slots.

### Events

This component does not emit custom events.

### Injected Context

The component injects optional `teleportButtonsTo` from parent for teleport target.

## Responsive Behavior

### Desktop (breakpoint+)

- All buttons displayed as full `AwButton` components
- CTA buttons and regular buttons shown in expanded state
- Context menu shows non-CTA buttons in dropdown

### Mobile (< breakpoint)

- CTA buttons teleported as fixed floating buttons at bottom
- Non-CTA buttons only in context menu dropdown
- Fixed buttons collapse based on scroll position

## Download Handling

Buttons with `download` property automatically:
- Prevent default click behavior
- Show loading state during download
- Use `downloadFile` utility for file downloads
- Require `$axios` instance

Example:
```markup
{
  text: 'Export',
  download: 'xlsx',
  href: '/api/export',
  cta: true
}
```

## Scroll Behavior

Fixed buttons expand/collapse based on scroll position:
- `expandOffset > 0`: Buttons expand when scroll < offset
- `expandOffset === -1`: Buttons never expand (always collapsed)
- `expandOffset === 150` (default): Expand in top 150px

Button text visibility is controlled by scroll position on mobile.

## Related Components

- `AwPage` - Main page component
- `AwPageSingle` - Often used with page menu buttons
- `AwButton` - Button component used for rendering
- `AwContextMenu` - Dropdown menu for non-CTA buttons

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as page component
- Uses Teleport (vue2-teleport) for fixed buttons
- Fixed buttons set CSS variable `--page-fixed-buttons-height` on body
- CTA buttons transformed to icon buttons on mobile (size lg, theme solid)
- Context menu positioned at bottom-end with 8px offset
- Visibility functions receive component instance for conditional logic
- Download functionality requires axios integration
- Tooltip directive support for all buttons