side navigation (beta)
Menu para navegação lateral.
demo interativa
Uma versão de interativa do componente desenvolvido.
propriedades*
property | description | required | default value | type |
---|---|---|---|---|
tree | Link tree for side navigation. You can check the type structure here | true | undefined | INavigationTreeData |
AppLogo | React Node with Application Logo sgv | true | undefined | ReactNode |
insideGrid | should align in a grid | false | false | boolean |
*valores gerados automaticamente.
sobre o shapeshifter
O SideNavigation é renderizado no Shapeshifter como uma aplicação microfrontend para utilização em Olist Store. Para acessar a última versão do componente, entre na biblioteca do Figma ou no Shapeshifter.
formatação
![Formatação do menu colapsado. O menu tem um botão secundário de ícone no topo (1).](https://designsystem.olist.io/latest/images/components/side-navigation/formatting_1.png)
![Formatação do menu expandido. No topo a esquerda, logo do produto (3), A direita do logo, botão com ícone de fechar (2). Primeira linha do menu tem um item expandido (4) com links internos (5).](https://designsystem.olist.io/latest/images/components/side-navigation/formatting_2.png)
- Open menu button: botão para abrir o menu.
- Close menu button: botão para colapsar o menu.
- Brand link: link para a página inicial do produto.
- Parent link: grupo com links internos.
- Children link: link para página.
uso
Quando utilizado, o side navigation representa o meio primário de navegação do site. Ele deve ficar sempre exposto e não muda de links conforme a profundidade da navegação.
grupos e alinhamento
O componente deve ser posicionado sempre na parte de fora do grid, a esquerda. Ele irá sobrepor o conteúdo quando expandido.
![Ilustração de página web com menu lateral colapsado. A grid começa a direita
do menu e termina ao final da página. O header fica dentro da grid.](https://designsystem.olist.io/latest/images/components/side-navigation/alignment_1.png)
side navigation colapsada
![Ilustração de página web com menu lateral expandido. O menu sobrepões a área
da página com grid, ficando acima da mesma. O header.](https://designsystem.olist.io/latest/images/components/side-navigation/alignment_2.png)
side navigation expandida
guia de conteúdo
O nome dos links deve corresponder ao título das páginas correspondentes.
guia de design
esperado
- Tem símbolo no Figma.
- Tem todos os estados aplicáveis.
- Texto possui contraste acessível (WCAG 2.0 - Nível AA).
- Usa os design tokens.
- Possui versão mobile.
- Tem guia de uso.
- Tem guia de conteúdo.
- Possui todas as variações necessárias.
- Possui versão web.
- Possui versão responsiva.
ideal
- Atende ao nível AAA de acessibilidade (WCAG 2.1).
- Tem microinterações no Figma.
- Possui animações no componente.
- Tem em todos os frameworks com que trabalhamos.
- Comporta múltiplos idiomas.