PageAnchors

A list of anchors to be displayed in the page.

Usage

Links

Use the links prop as an array of objects with the following properties:

label: string
icon?: string

You can pass any property from the Link component such as to, target, etc.

<script setup lang="ts">
const links = ref([
  {
    label: 'Documentation',
    icon: 'i-lucide-book-open',
    to: '/getting-started'
  },
  {
    label: 'Components',
    icon: 'i-lucide-box',
    to: '/components/app'
  },
  {
    label: 'Roadmap',
    icon: 'i-lucide-map',
    to: '/roadmap'
  },
  {
    label: 'Figma Kit',
    icon: 'i-simple-icons-figma',
    to: 'https://www.figma.com/community/file/1288455405058138934',
    target: '_blank'
  },
  {
    label: 'Releases',
    icon: 'i-simple-icons-github',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  }
])
</script>

<template>
  <UPageAnchors :links="links" />
</template>

Examples

While these examples use Nuxt Content v3, the components can be integrated with any content management system.

Within a layout

Use the PageAnchors component inside the PageAside component to display a list of links above the navigation.

layouts/docs.vue

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const navigation = inject<ContentNavigationItem[]>('navigation')

const links = [{
  label: 'Documentation',
  icon: 'i-lucide-book-open',
  to: '/getting-started'
}, {
  label: 'Components',
  icon: 'i-lucide-box',
  to: '/components/app'
}, {
  label: 'Roadmap',
  icon: 'i-lucide-map',
  to: '/roadmap'
}, {
  label: 'Figma Kit',
  icon: 'i-simple-icons-figma',
  to: 'https://www.figma.com/community/file/1288455405058138934',
  target: '_blank'
}, {
  label: 'Releases',
  icon: 'i-lucide-rocket',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}]
</script>

<template>
  <UPage>
    <template #left>
      <UPageAside>
        <UPageAnchors :links="links" />

        <USeparator type="dashed" />

        <UContentNavigation :navigation="navigation" />
      </UPageAside>
    </template>

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

API

Props

Prop	Default	Type
`as`	`'nav'`	`any` The element or component this component should render as.
`links`		`PageAnchor[]`
`ui`		`Partial<{ root: string; list: string; item: string; link: string; linkLeading: string; linkLeadingIcon: string; linkLabel: string; linkLabelExternalIcon: string; }>`

Slots

Slot	Type
`link`	`{ link: PageAnchor; active: boolean; }`
`link-leading`	`{ link: PageAnchor; active: boolean; }`
`link-label`	`{ link: PageAnchor; active: boolean; }`
`link-trailing`	`{ link: PageAnchor; active: boolean; }`

Theme

app.config.ts

export default defineAppConfig({
  uiPro: {
    pageAnchors: {
      slots: {
        root: '',
        list: '',
        item: 'relative',
        link: 'group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-[var(--ui-primary)]',
        linkLeading: 'rounded-[calc(var(--ui-radius)*1.5)] p-1 inline-flex ring-inset ring',
        linkLeadingIcon: 'size-4 shrink-0',
        linkLabel: 'truncate',
        linkLabelExternalIcon: 'size-3 absolute top-0 text-[var(--ui-text-dimmed)]'
      },
      variants: {
        active: {
          true: {
            link: 'text-[var(--ui-primary)] font-semibold',
            linkLeading: 'bg-[var(--ui-primary)] ring-[var(--ui-primary)] text-[var(--ui-bg)]'
          },
          false: {
            link: [
              'text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] font-medium',
              'transition-colors'
            ],
            linkLeading: [
              'bg-[var(--ui-bg-elevated)]/50 ring-[var(--ui-border-accented)] text-[var(--ui-text-dimmed)] group-hover:bg-[var(--ui-primary)] group-hover:ring-[var(--ui-primary)] group-hover:text-[var(--ui-bg)]',
              'transition'
            ]
          }
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        pageAnchors: {
          slots: {
            root: '',
            list: '',
            item: 'relative',
            link: 'group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-[var(--ui-primary)]',
            linkLeading: 'rounded-[calc(var(--ui-radius)*1.5)] p-1 inline-flex ring-inset ring',
            linkLeadingIcon: 'size-4 shrink-0',
            linkLabel: 'truncate',
            linkLabelExternalIcon: 'size-3 absolute top-0 text-[var(--ui-text-dimmed)]'
          },
          variants: {
            active: {
              true: {
                link: 'text-[var(--ui-primary)] font-semibold',
                linkLeading: 'bg-[var(--ui-primary)] ring-[var(--ui-primary)] text-[var(--ui-bg)]'
              },
              false: {
                link: [
                  'text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] font-medium',
                  'transition-colors'
                ],
                linkLeading: [
                  'bg-[var(--ui-bg-elevated)]/50 ring-[var(--ui-border-accented)] text-[var(--ui-text-dimmed)] group-hover:bg-[var(--ui-primary)] group-hover:ring-[var(--ui-primary)] group-hover:text-[var(--ui-bg)]',
                  'transition'
                ]
              }
            }
          }
        }
      }
    })
  ]
})

PageAccordion

A pre-styled Accordion to display in your pages.

PageAside

A sticky aside to display your page navigation.