Nuxt•4mo ago

Page Content Navigation

How can I implement the navigation menu of the NuxtUI wepage (https://nuxt.com) For example, which component can I use to implement the "On this page" pop-out menu?

6 Replies

kapa.ai•4mo ago

Hi @Alex. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement the "On this page" pop-out menu (Table of Contents) like on the NuxtUI or Nuxt.com documentation pages, you should use the UContentToc component from Nuxt UI Pro. This component provides a sticky Table of Contents with automatic active anchor link highlighting and is designed to work with the @nuxt/content module. Basic usage example:

<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () =>
  queryCollection('content').path(route.path).first()
)
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
</script>

<template>
  <UContentToc :links="page?.body?.toc?.links" />
</template>

<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () =>
  queryCollection('content').path(route.path).first()
)
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
</script>

<template>
  <UContentToc :links="page?.body?.toc?.links" />
</template>

You can customize the title, color, and highlight of the Table of Contents using the title, color, and highlight props:

<UContentToc title="On this page" color="neutral" highlight :links="links" />

<UContentToc title="On this page" color="neutral" highlight :links="links" />

Note:
- The UContentToc component is only available when the @nuxt/content module is installed. - The links prop should be populated with the TOC links generated from your page content, typically available at page.body.toc.links when using Nuxt Content. For more details and advanced usage, see the UContentToc documentation and example layouts that use it in the right slot of the UPage component here source. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@822057189556486186> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AlexOP•4mo ago

@kapa.ai How do I generate TOC links from my page?

WiFi Plug•4mo ago

it's auto generated when you have a nuxt content page that's how i set mine up. all my H1 tags automatically became available in the toc links not sure if it works or not without using nuxt content haven't tried it

Sean LeCheminant•4mo ago

You can enable all content components using

uiPro: {
    content: true
  }

uiPro: {
    content: true
  }

You can view the docs for how to format your links: https://github.com/nuxt/ui-pro/blob/v3/src/runtime/components/content/ContentToc.vue But you will also have to tag your heading tags with ids.

AlexOP•4mo ago

thank you, I think I will use the UContentToc without auto generated TOC for now, this should be possible by just passing another data into the component.

Gaming

Programming

Page Content Navigation

Did you find this page helpful?