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[]
[]