---
title: "PageAnchors"
description: "A list of anchors to be displayed in the page."
canonical_url: "https://vinicunca.dev/pohon/components/page-anchors"
---
# PageAnchors

> A list of anchors to be displayed in the page.

## Usage

Use the PageAnchors component to display a list of links.

```vue
<script setup lang="ts">
import type { PageAnchor } from 'pohon-ui'

const links = ref<PageAnchor[]>([
  {
    label: "Documentation",
    icon: "i-lucide-book-open",
    to: "/pohon/getting-started"
  },
  {
    label: "Components",
    icon: "i-lucide-box",
    to: "/pohon/components"
  },
  {
    label: "Theme Studio",
    icon: "i-lucide-palette",
    to: "/theme",
    target: "_blank"
  },
  {
    label: "Releases",
    icon: "i-simple-icons-github",
    to: "https://github.com/vinicunca/pohon/releases",
    target: "_blank"
  }
])
</script>

<template>
  <PPageAnchors :links="links" />
</template>
```

### Links

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

- `label: string`
- `icon?: string`
- `class?: any`
- `ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeading?: ClassNameValue, linkLeadingIcon?: ClassNameValue }`

You can pass any property from the [Link](https://vinicunca.dev/pohon/components/link#props) component such as `to`, `target`, etc.

```vue
<script setup lang="ts">
import type { PageAnchor } from 'pohon-ui'

const links = ref<PageAnchor[]>([
  {
    label: "Documentation",
    icon: "i-lucide-book-open",
    to: "/pohon/getting-started"
  },
  {
    label: "Components",
    icon: "i-lucide-box",
    to: "/pohon/components"
  },
  {
    label: "Theme Studio",
    icon: "i-lucide-palette",
    to: "/theme",
    target: "_blank"
  },
  {
    label: "Releases",
    icon: "i-simple-icons-github",
    to: "https://github.com/vinicunca/pohon/releases",
    target: "_blank"
  }
])
</script>

<template>
  <PPageAnchors :links="links" />
</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 PageAnchors component inside the [PageAside](https://vinicunca.dev/pohon/components/page-aside) component to display a list of links above the navigation.

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

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

const links: Array<PageAnchor> = [{
  label: 'Documentation',
  icon: 'i-lucide-book-open',
  to: '/pohon/getting-started'
}, {
  label: 'Components',
  icon: 'i-lucide-box',
  to: '/pohon/components'
}, {
  label: 'Theme Studio',
  icon: 'i-lucide-palette',
  to: '/theme',
  target: '_blank'
}, {
  label: 'Releases',
  icon: 'i-lucide-rocket',
  to: 'https://github.com/vinicunca/pohon/releases',
  target: '_blank'
}];
</script>

<template>
  <PPage>
    <template #left>
      <PPageAside>
        <PPageAnchors :links="links" />

        <PSeparator type="dashed" />

        <PContentNavigation :navigation="navigation" />
      </PPageAside>
    </template>

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

## API

### Props

```ts
/**
 * Props for the PageAnchors component
 */
interface PageAnchorsProps {
}
```

### Slots

```ts
/**
 * Slots for the PageAnchors component
 */
interface PageAnchorsSlots {
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    pageAnchors: {
      slots: {
        root: '',
        list: '',
        item: 'relative',
        link: 'group text-sm flex items-center gap-1.5 py-1 rounded-sm outline-primary/25 focus-visible:outline-3',
        linkLeading: 'rounded-md p-1 inline-flex ring-inset ring',
        linkLeadingIcon: 'size-4 shrink-0',
        linkLabel: 'truncate',
        linkLabelExternalIcon: 'size-3 absolute top-0 color-text-dimmed'
      },
      variants: {
        active: {
          true: {
            link: 'color-primary font-600',
            linkLeading: 'bg-primary ring-primary color-primary-foreground'
          },
          false: {
            link: [
              'color-text-muted hover:color-text font-500',
              'transition-colors'
            ],
            linkLeading: [
              'color-text-dimmed bg-background-elevated/50 ring-border-accented group-hover:color-primary-foreground group-hover:bg-primary group-hover:ring-primary',
              'transition'
            ]
          }
        }
      }
    }
  }
})
```

## Changelog

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

---

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


## Sitemap

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