<DocsSidenav> Component

DocsSidenav renders a tree of links, with the option to include nested sections. Horizontal dividers can also be included between items.

Share
Code Editor
<DocsSidenav
product="terraform"
currentPath="agent/autoauth/methods/aws"
baseRoute="docs"
navData={[
{
"title": "Overview",
"path": ""
},
{
"title": "What is Vault?",
"path": "what-is-vault"
},
{
"heading": "Test Headline"
},
{
"title": "Vault Agent",
"routes": [
{
"title": "Overview",
"path": "agent"
},
{
"title": "Auto-Auth With A Very Long NavCategory Title That Should Wrap To Multiple Lines",
"routes": [
{
"title": "Overview",
"path": "agent/autoauth"
},
{
"title": "AWS Agent",
"path": "agent/autoauth/aws"
},
{
"title": "Methods",
"routes": [
{
"title": "Overview",
"path": "agent/autoauth/methods"
},
{
"title": "AliCloud With A Very Long NavLeaf Title That Should Wrap To Multiple Lines",
"path": "agent/autoauth/methods/alicloud"
},
{
"title": "AWS",
"path": "agent/autoauth/methods/aws"
},
{
"title": "AWS active page alias",
"href": "/components/docssidenav"
},
{
"divider": true
},
{
"title": "<code>GCP</code>",
"path": "agent/autoauth/methods/gcp"
},
{
"divider": true
},
{
"title": "External Link",
"href": "https://google.com"
},
{
"title": "Internal Direct Link",
"href": "/some-non-docs-path"
}
]
},
{
"title": "With active nested alias",
"routes": [
{
"title": "Subcategory",
"routes": [
{
"title": "Active page alias In Another Category",
"href": "/components/docssidenav"
}
]
}
]
}
]
},
{
"title": "No Index Category",
"routes": [
{
"title": "Foo Item",
"path": "agent/no-index-test/foo"
}
]
},
{
"title": "Category With First Item Hidden",
"routes": [
{
"title": "First Item",
"path": "hidden-first-item/first",
"hidden": true
},
{
"title": "Second Item",
"path": "hidden-first-item/second"
}
]
},
{
"title": "Hidden Category",
"hidden": true,
"routes": [
{
"title": "Overview",
"path": "hidden-category"
}
]
},
{
"title": "Only Index Test <sup>ENT</sup>",
"routes": [
{
"title": "Overview",
"path": "agent/only-index-test"
}
]
}
]
}
]}
/>

Where it's used

0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...
6.x.x
Loading 6.x.x releases...
7.x.x
Loading 7.x.x releases...
8.x.x
Loading 8.x.x releases...
9.x.x
Loading 9.x.x releases...

Props

NameDescription
product
string
A lower-case product identifier to pull in respective theme colors. The default is hashicorp blue.
Options: "hashicorp", "boundary", "consul", "nomad", "packer", "terraform", "vault", "vagrant", "waypoint"
currentPath
string
Path to the current page, relative to the baseRoute. Used to highlight the current page.
baseRoute*
string
Top level navigation route, for example docs, api-docs, etc.
disableFilter
boolean
If true, disable the sidebar filter input.
navData*
object
Tree of navigation data to render. See docs-sidenav/types.js for details.