Sidebar

Sidebar components are used to provide a collapsible navigation menu that can be toggled open or closed. They are typically used for site navigation, allowing users to access different sections of the application.

Storybook

Loading Code Block...

Installation

To get started, install Butterfly DS via aqua:

Loading Code Block...

Usage

Loading Code Block...

Sidebar Stacked

Loading Code Block...

---

Props

Props	Default	Type	Description
sidebarHeader	{}	object	Configuration for the sidebar header section
menu	[]	array	An array of objects representing the sidebar menu items.
sidebarFooter	{}	object	Configuration for the sidebar footer section
indentedSidebar	false	boolean	Whether the sidebar should have an indented layout.

Sidebar Header

Props	Default	Type	Description
title	-	string	The title text for the sidebar header.
description	-	string	The description text for the sidebar header.
variant	side-by-side	side-by-side | image | stacked	The variant style for the sidebar header. Options include 'default', 'image', and 'dropdown'.
hasDropdown	false	boolean	Whether the sidebar header has a dropdown menu.
dropdownOptions	[]	array	An array of objects representing the dropdown options in the sidebar header. Each object should have a 'label' and 'value'.
dropdownPlaceholder	Select an option	string	The placeholder text for the dropdown in the sidebar header.
image	-	string	The logo URL for the sidebar header.

Menu Items

Props	Default	Type	Description
sectionLabel	-	string	The label text for the menu section.
children	[]	array	An array of objects representing the menu items. Each object should have a 'title', 'url', and optionally 'icon' and 'active' properties.

Sidebar Footer

Props	Default	Type	Description
variant	list	list | side-by-side | image	The variant style for the sidebar footer.
list	[]	array	An array of objects representing the footer menu items. Each object should have a 'title' and 'url'.