---
title: "PageAside"
description: "A sticky aside to display your page navigation."
canonical_url: "https://vinicunca.dev/pohon/components/page-aside"
---
# PageAside

> A sticky aside to display your page navigation.

## Usage

The PageAside component is a sticky `<aside>` element that is only displayed starting from the [`lg` breakpoint](https://unocss.dev/docs/breakpoints).

> [!TIP]
> See: /pohon/getting-started/theme/css-variables#header
> 
> The PageAside component uses the `--ui-header-height` CSS variable to position itself correctly below the `Header`.

Use it inside the `left` or `right` slot of the [Page](https://vinicunca.dev/pohon/components/page) component:

```vue
<template>
  <PPage>
    <template #left>
      <PPageAside />
    </template>
  </PPage>
</template>
```

## Examples

> [!NOTE]
> 
> While these examples use [Nuxt Content](https://content.nuxt.com), the components can be integrated with any content management system.

### Within a layout

Use the PageAside component in a layout to display the navigation:

```vue [layouts/docs.vue]
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content';

const navigation = inject<Ref<Array<ContentNavigationItem>>>('navigation');
</script>

<template>
  <PPage>
    <template #left>
      <PPageAside>
        <PContentNavigation :navigation="navigation" />
      </PPageAside>
    </template>

    <slot />
  </PPage>
</template>
```

> [!NOTE]
> 
> In this example, we use the `ContentNavigation` component to display the navigation injected in `app.vue`.

## API

### Props

```ts
/**
 * Props for the PageAside component
 */
interface PageAsideProps {
  /**
   * The element or component this component should render as.
   * @default 'aside'
   */
  as?: any;
  ui?: { root?: SlotClass; container?: SlotClass; top?: SlotClass; topHeader?: SlotClass; topBody?: SlotClass; topFooter?: SlotClass; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the PageAside component
 */
interface PageAsideSlots {
  top(): any;
  default(): any;
  bottom(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    pageAside: {
      slots: {
        root: 'py-8 hidden overflow-y-auto lg:pe-6.5 lg:ps-4 lg:max-h-[calc(100vh-var(--ui-header-height))] lg:block lg:top-$ui-header-height lg:sticky lg:-ms-4',
        container: 'relative',
        top: 'sticky -top-8 -mt-8 pointer-events-none z-1',
        topHeader: 'h-8 bg-background -mx-4 px-4',
        topBody: 'bg-background relative pointer-events-auto flex flex-col -mx-4 px-4',
        topFooter: 'px-4 h-8 from-background bg-gradient-to-b -mx-4'
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/vinicunca/pohon/commits/main/src/runtime/components/PageAside.vue) and [theme](https://github.com/vinicunca/pohon/commits/main/src/theme/page-aside.ts).

---

- [GitHub](https://github.com/vinicunca/pohon/blob/main/src/runtime/components/PageAside.vue)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.