Skip to main content

Sidebar

The Sidebar works as a template component, that is, in addition to having its own styles and behaviors, it also styles, positions and coordinates components passed through the children property.

There must be only 1 Sidebar component on the page, preferably after the Navbar component.

Label​

It is possible to include a label that describes the navigation context provided by Sidebar, through the Navbar.Label component.

Collapsible​

Use the collapsible property so that the Sidebar content can be collapsed or expanded.

Informação

Use the defaultClose property when you want a collapsible Sidebar to start closed, or use the close property to control whether a collapsible Sidebar is open or closed.

For more details see the component API.

Use the Sidebar.Header and Sidebar.Footer subcomponents to add a header and footer to Sidebar.

Composition with other layout components​

The styles of Sidebar automatically interact with the styles of StickyBarGroup, Navbar and Main to compose a layout pattern for pages. Since version 8.14.0 this behavior also works when these components are separated into different micro frontends.

info

Uses the disabledAutoPositioning property to disable automatic positioning of the component.

This property can be useful in scenarios where the page layout will be organized by an external library or some custom style.

Internationalization​

You can customize the label for the button that opens and closes the collapsible Sidebar:

  • closeLabelText: Custom text to label the button that closes a Sidebar. This text is not displayed, but is useful for accessibility
  • openLabelText: Custom text to label the button that opens a Sidebar. This text is not displayed, but is useful for accessibility

To help in this process, constants are available with default values ​​for these properties - in English, Portuguese and Spanish. For more details, see the component API.

Feedback​