Sidebar

Sidebars make it easier for users to find information on your site

On this page

Install usebootstrap-docs

Sidebar is an experimental component included in the usebootstrap-docs module.

Module installation is required to run

Installation of use-bootstrap-docs NPM Package

npx nuxi@latest module add usebootstrap-docs

Sidebar

Sidebars can be implemented by adding <Sidebar> and specifying :routes.

vue
<template>
  <Sidebar :routes="routesSample" />
</template>
<script setup lang="ts">
import routesSample from "./routes-sample.json"
</script>

JSON file

[{
"name": "Sample",
"icon": "bi:award-fill",
"color": "indigo",
"children": 
 [{
  "name": "SampleContent",
  "path": "#"
 },
{
  "name": "SampleContent2",
  "path": "#"
 }]
},
{
"name": "Sample2",
"icon": "bi:airplane-fill",
"color": "green",
"children": 
[{
  "name": "SampleContent3",
  "path": "#"
}]
}
]