N
Nuxt•5mo ago
jaymate

Docus Content Layout/Structure customisation (navbar and sidebar particularly)

Hello! Total noob here. I'm trying to setup Docus as a documentation platform, but I want to have multiple different pages or tabs, each tab is like a category, but it has it's own sidebar, rather than sharing a global sidebar. Tabs would be accessible from a 'header'. I'm not quite sure how to achieve this, or where I might be able to configure this. All I can really see on the docus docs is that the file structure and navigation is just handled automatically, but I don't want a global sidebar. Basically like how the nuxtseo.com documentation is, different categories/tabs for site-config, site-utils, robots etc, with each category/tab having it's own subcategories and sidebar. Maybe the AI bot can help me here.
2 Replies
kapa.ai
kapa.ai•5mo ago
Hi @jaymate. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve a documentation layout in Docus (Nuxt Content + Nuxt UI Pro) where each top-level category/tab has its own sidebar (rather than a global sidebar), you’ll need to customize your layout to render different navigation structures based on the current section or tab. Key Points from the Knowledge Sources - Sidebar Navigation: By default, Docus (and Nuxt Content x UI Pro) auto-generates sidebar navigation from your folder structure. However, you can override and customize this by using the UContentNavigation component and providing it with a specific navigation tree, rather than the global one How to upgrade your Nuxt documentation website to Content x UI v3 Within a layout. - Tabs/Category Navigation: You can use the UTabs component in your header to switch between categories. Each tab can correspond to a top-level section, and you can control which sidebar navigation is shown based on the active tab Tabs. - Per-Page/Section Navigation: The UContentNavigation component can be given a custom navigation tree, so you can generate or filter navigation items for each section/category as needed ContentNavigation Usage. Example Approach 1. Header with Tabs: Use UTabs in your header to let users switch between categories. 2. Sidebar per Tab: In your layout, render a different navigation tree in the sidebar depending on the active tab/category. #### Example Layout (layouts/docs.vue) 
<script setup lang="ts">
import { ref, computed } from 'vue'
import type { TabsItem } from '@nuxt/ui'
import type { ContentNavigationItem } from '@nuxt/content'
// Define your categories/tabs
const tabs = ref<TabsItem[]>([
  { label: 'Site Config', value: 'site-config' },
  { label: 'Site Utils', value: 'site-utils' },
  { label: 'Robots', value: 'robots' }
])

// Track the active tab
const activeTab = ref('site-config')

// Example: Inject or fetch all navigation trees
const allNavigation = inject<Ref<ContentNavigationItem[]>>('navigation')

// Compute the navigation for the active tab/category
const navigation = computed(() =>
  allNavigation.value.find(nav => nav.title === activeTab.value)?.children || []
)
</script>

<template>
  <UPage>
    <template #header>
      <UTabs :items="tabs" v-model="activeTab" :content="false" />
    </template>
    <template #left>
      <UPageAside>
        <UContentNavigation :navigation="navigation" highlight />
      </UPageAside>
    </template>
    <slot />
  </UPage>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import type { TabsItem } from '@nuxt/ui'
import type { ContentNavigationItem } from '@nuxt/content'
// Define your categories/tabs
const tabs = ref<TabsItem[]>([
  { label: 'Site Config', value: 'site-config' },
  { label: 'Site Utils', value: 'site-utils' },
  { label: 'Robots', value: 'robots' }
])

// Track the active tab
const activeTab = ref('site-config')

// Example: Inject or fetch all navigation trees
const allNavigation = inject<Ref<ContentNavigationItem[]>>('navigation')

// Compute the navigation for the active tab/category
const navigation = computed(() =>
  allNavigation.value.find(nav => nav.title === activeTab.value)?.children || []
)
</script>

<template>
  <UPage>
    <template #header>
      <UTabs :items="tabs" v-model="activeTab" :content="false" />
    </template>
    <template #left>
      <UPageAside>
        <UContentNavigation :navigation="navigation" highlight />
      </UPageAside>
    </template>
    <slot />
  </UPage>
</template>
- This setup uses UTabs for the header and dynamically updates the sidebar navigation based on the selected tab. - You’ll need to ensure your content structure and navigation data (allNavigation) are organized so you can filter or select the correct navigation tree for each tab/category. Customizing Navigation Trees - You may need to define content collections or structure your content/ directory so that each top-level folder represents a category, making it easier to filter navigation items Define Content Collections. - If you need more control, you can manually build the navigation trees for each section and pass them to UContentNavigation. --- Summary:
You can achieve per-category sidebars by combining UTabs for category navigation in the header and filtering the navigation tree you pass to UContentNavigation in the sidebar, based on the active tab. This approach is flexible and matches the pattern used in advanced documentation sites like nuxtseo.com. If you need more specific code or run into issues with navigation data, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•5mo ago
<@194695603807191040> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?