`, add a `role="navigation"` to `.sidebar-nav` to explicitly identify it as a landmark region for users of assistive technologies. Read on for an example and list of supported sub-components. ## Supported content Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed: - `.sidebar-header` for optional header. - `.sidebar-brand` for your company, product, or project name. - `.sidebar-nav` for a full-height and lightweight navigation (including support for menus). - `.sidebar-footer` for optional footer. - `.sidebar-toggler` for use with our minimizer plugin. ## Examples Below is a more complete sidebar example shown by default on desktop devices. It combines several optional features in a single demo, including narrow visibility helpers, tree navigation, nested groups, a custom group indicator, badges, and a footer menu. ```html ``` ### Narrow sidebar Add the `.sidebar-narrow` class to make the sidebar narrow. Use `.d-sidebar-narrow` to show content only in the narrow state and `.d-sidebar-narrow-none` to hide content in the narrow state. They supersede the brand-specific helpers `.sidebar-brand-full`, `.sidebar-brand-narrow` and `.d-narrow-none`, which are deprecated but still work — prefer the `.d-sidebar-narrow*` names in new markup. ```html ``` ### Unfoldable sidebar Add the `.sidebar-narrow-unfoldable` class to make the sidebar narrow with unfoldable on hover. Use `.d-sidebar-narrow-unfoldable` and `.d-sidebar-narrow-unfoldable-none` to control content visibility for unfoldable sidebars. ```html ``` ### Narrow visibility helpers Use the sidebar visibility helpers to swap content between regular, narrow, and narrow-unfoldable variants: - `.d-sidebar-narrow` shows content only in the narrow state - `.d-sidebar-narrow-none` hides content in the narrow state - `.d-sidebar-narrow-unfoldable` shows content only when the sidebar uses the `sidebar-narrow-unfoldable` variant - `.d-sidebar-narrow-unfoldable-none` hides content when the sidebar uses the `sidebar-narrow-unfoldable` variant ### Sizes The default width is `--cui-sidebar-width`. Add `.sidebar-sm`, `.sidebar-lg` or `.sidebar-xl` for the other widths from the `$sidebar-widths` map; each class also sets the space the sidebar reserves for the content next to it, so the layout follows the width. ```html ``` ## Navigation Use `.sidebar-nav` as the main navigation container inside a sidebar. It supports plain links, section titles, nested groups, tree navigation, and custom group indicators. Add `data-coreui-navigation` when you want CoreUI to handle expandable groups automatically. It marks the link matching the current address as active, opens every group that holds it, and closes the other groups as one is opened. ### Navigation options The plugin takes its options from data attributes on the same element, converting the name from "_camelCase_" to "_kebab-case_": `data-coreui-active-links-exact="false"`. | Name | Type | Default | Description | | --- | --- | --- | --- | | `activeLinksExact` | boolean | `true` | Mark a link active only when its `href` is the whole current address. The address is read without its query string and hash, so `/settings?tab=2` still matches `href="/settings"`; the `href` itself is compared as written, so one carrying a query string of its own never matches. Set it to `false` to mark a link active on its sub-routes too, which is a prefix match: `href="/settings"` then stays active on `/settings/profile`. | | `groupsAutoCollapse` | boolean | `true` | Close the other groups when one opens. Only the literal `true` does so: any other value, including a string, leaves the open ones open. | ```html