Aside

A sticky <aside> with customizable slots and anchors.

Usage

The Aside component will instantiate a sticky <aside> element, displayed only after the lg breakpoint with a min-height based on the --header-height variable.

Use the links prop to display a list of links at the top of the Aside and the #top or #bottom slots to display content above or below the links.

<script setup>
const links = [{
  label: 'Documentation',
  icon: 'i-heroicons-book-open',
  to: '/getting-started'
}, {
  label: 'Playground',
  icon: 'i-simple-icons-stackblitz',
  to: '/playground'
}, {
  label: 'Roadmap',
  icon: 'i-heroicons-map',
  to: '/roadmap'
}, {
  label: 'Pro',
  icon: 'i-heroicons-square-3-stack-3d',
  to: '/pro'
}, {
  label: 'Releases',
  icon: 'i-heroicons-rocket-launch',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}]

const pageLinks = [{
  icon: 'i-heroicons-heart',
  label: 'Learn how to contribute',
  to: '/getting-started/contributing',
  target: '_blank'
}]
</script>

<template>
  <UAside :links="links">
    <template #top>
      <UDocsSearchButton />
    </template>

    <Placeholder class="h-60" />

    <template #bottom>
      <UDivider type="dashed" class="my-6" />

      <UPageLinks :links="pageLinks" />
    </template>
  </UAside>
</template>

You'll usually use this component in the #left slot of a Page with a NavigationTree inside.

layouts/docs.vue
<template>
  <UContainer>
    <UPage>
      <template #left>
        <UAside :links="links">
          <UNavigationTree :links="navigationLinks" default-open :multiple="false" />
        </UAside>
      </template>

      <slot />
    </UPage>
  </UContainer>
</template>

Slots

top
{}
links
{}
default
{}
bottom
{}

Props

ui
{}
{}
links
AsideLink[]
[]