Pular para o conteúdo principal

Sidebar

O Sidebar funciona como um template component, ou seja, além de ter estilos e comportamentos próprios, ele também estiliza, posiciona e coordena componentes passados através da propriedade children.

Deve existir apenas 1 componente Sidebar na página, estando preferencialmente após o componente Navbar.

Label​

É possível incluir um label que descreve o contexto da navegação disponibilizado pela Sidebar, através do componente Navbar.Label.

Retrátil​

Utilize a propriedade collapsible para que o conteúdo da Sidebar possa ser contraído ou expandido.

Informação

Utilize a propriedade defaultClose quando quiser que uma Sidebar retrátil inicie fechada, ou utilize a propriedade close para controlar se uma Sidebar retrátil está aberta ou fechada.

Para mais detalhes consulte a API do componente.

Utilize os subcomponentes Sidebar.Header e Sidebar.Footer para adicionar um cabeçalho e um rodapé a Sidebar.

Composição com outros componentes de layout​

Os estilos da Sidebar interagem automaticamente com os estilos do StickyBarGroup, Navbar e do Main para compor um padrão de layout para páginas. Desde a versão 8.14.0 este comportamento também funciona quando estes componentes estão separados em diferentes micro frontends.

Informação

Utiliza a propriedade disabledAutoPosisitioning para desabilitar o posicionamento automático do componente.

Esta propriedade pode ser útil em cenários onde o layout da página será organizado por uma biblioteca externa ou algum estilo curtomizado.

Internacionalização​

Você pode customizar o rótulo do botão que abre e fecha uma Sidebar retrátil:

  • closeLabelText: Texto customizado para rotular o botão que fecha uma Sidebar. Este texto não é exibido, mas é útil para acessibilidade
  • openLabelText: Texto customizado para rotular o botão que abre uma Sidebar. Este texto não é exibido, mas é útil para acessibilidade

Para ajudar neste processo, constantes estão disponíveis com valores padrões para estas propriedades - em inglês, português e espanhol. Para mais detalhes consulte a API do componente.

Feedback​