PageLinks

A list of links to display on the page.

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

label: string
icon?: IconComponent
class?: any
b24ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeadingIcon?: ClassNameValue }

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

{
  "wait": "Loading client-side content..."
}

Title

Use the title prop to display a title above the links.

title

{
  "wait": "Loading client-side content..."
}

Examples

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

Within a page

Use the PageLinks component in the bottom slot of the ContentToc component to display a list of links below the table of contents.

pages/[...slug].vue

<script setup lang="ts">
import type { PageLink } from '@bitrix24/b24ui-nuxt'
import DocumentSignIcon from '@bitrix24/b24icons-vue/main/DocumentSignIcon'
import AiStarsIcon from '@bitrix24/b24icons-vue/outline/AiStarsIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const route = useRoute()

definePageMeta({
  layout: 'docs'
})

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path)
})

const links = computed<PageLink[]>(() => [{
  label: 'Edit this page',
  icon: DocumentSignIcon,
  to: `https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/${page?.value?.stem}.md`,
  target: '_blank'
}, {
  label: 'Star on GitHub',
  icon: AiStarsIcon,
  to: 'https://github.com/bitrix24/b24ui',
  target: '_blank'
}, {
  label: 'Releases',
  icon: RocketIcon,
  to: 'https://github.com/bitrix24/b24ui/releases'
}])
</script>

<template>
  <div>
    <div>
      <ContentRenderer :value="page" />

      <B24Separator />

      <B24ContentSurround :surround="surround" />
    </div>

    <div>
      <B24ContentToc :links="page.body.toc.links">
        <template #bottom>
          <B24Separator type="dashed" />

          <B24PageLinks title="Community" :links="links" />
        </template>
      </B24ContentToc>
    </div>
  </div>
</template>

API

Props

Prop	Default	Type
`as`	`'nav'`	`any` The element or component this component should render as.
`title`		`string`
`links`		`PageLink[]`
`b24ui`		`{ root?: ClassNameValue; title?: ClassNameValue; list?: ClassNameValue; item?: ClassNameValue; link?: ClassNameValue; linkWrapper?: ClassNameValue; linkLeadingIcon?: ClassNameValue; linkLabel?: ClassNameValue; linkLabelExternalIcon?: ClassNameValue; }`

Slots

Slot	Type
`title`	`{}`
`link`	`{ link: PageLink; active: boolean; b24ui: object; }`
`link-leading`	`{ link: PageLink; active: boolean; b24ui: object; }`
`link-label`	`{ link: PageLink; active: boolean; }`
`link-trailing`	`{ link: PageLink; active: boolean; }`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    pageLinks: {
      slots: {
        root: 'flex flex-col gap-[12px]',
        title: 'text-(--b24ui-typography-legend-color) text-(length:--ui-font-size-md) leading-(--ui-font-line-height-md) font-(--ui-font-weight-semi-bold) flex items-center gap-[6px]',
        list: 'flex flex-col gap-[8px]',
        item: 'relative',
        link: 'group text-(length:--ui-font-size-sm) cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-start text-(--ui-color-design-selection-content) underline-offset-2 hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline flex flex-row items-center justify-between',
        linkWrapper: 'flex items-center gap-[6px]',
        linkLeadingIcon: 'size-5 shrink-0',
        linkLabel: 'truncate',
        linkLabelExternalIcon: 'size-4 text-(--ui-color-design-selection-content) group-hover:text-(--ui-color-accent-main-primary-alt-2)'
      },
      variants: {
        active: {
          true: {
            link: 'text-(--ui-color-accent-main-primary-alt-2)',
            linkLabelExternalIcon: 'text-(--ui-color-accent-main-primary-alt-2)'
          },
          false: {
            link: [
              'text-(--ui-color-design-selection-content) hover:text-(--ui-color-accent-main-primary-alt-2)'
            ]
          }
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        pageLinks: {
          slots: {
            root: 'flex flex-col gap-[12px]',
            title: 'text-(--b24ui-typography-legend-color) text-(length:--ui-font-size-md) leading-(--ui-font-line-height-md) font-(--ui-font-weight-semi-bold) flex items-center gap-[6px]',
            list: 'flex flex-col gap-[8px]',
            item: 'relative',
            link: 'group text-(length:--ui-font-size-sm) cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-start text-(--ui-color-design-selection-content) underline-offset-2 hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline flex flex-row items-center justify-between',
            linkWrapper: 'flex items-center gap-[6px]',
            linkLeadingIcon: 'size-5 shrink-0',
            linkLabel: 'truncate',
            linkLabelExternalIcon: 'size-4 text-(--ui-color-design-selection-content) group-hover:text-(--ui-color-accent-main-primary-alt-2)'
          },
          variants: {
            active: {
              true: {
                link: 'text-(--ui-color-accent-main-primary-alt-2)',
                linkLabelExternalIcon: 'text-(--ui-color-accent-main-primary-alt-2)'
              },
              false: {
                link: [
                  'text-(--ui-color-design-selection-content) hover:text-(--ui-color-accent-main-primary-alt-2)'
                ]
              }
            }
          }
        }
      }
    })
  ]
})

PageGrid

A responsive grid system for creating flexible content layouts.

PageList

A vertical list layout for stacking content items.