PageAnchors

A list of anchors to be displayed in the page.

Usage

Use the PageAnchors component to display a list of links.

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

<script setup lang="ts">
import { ref } from 'vue'
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 component such as to, target, etc.

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

<script setup lang="ts">
import { ref } from 'vue'
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

While these examples use Nuxt Content, 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';
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

Prop	Default	Type

Slots

Slot	Type

Theme

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'
            ]
          }
        }
      }
    }
  }
})

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      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

No recent changes

Page

A grid layout for your pages with left and right columns.

PageAside

A sticky aside to display your page navigation.