componentes

side navigation (beta)

Menu para navegação lateral.

demo interativa

Uma versão de interativa do componente desenvolvido.

propriedades*

propertydescriptionrequireddefault valuetype

tree

Link tree for side navigation. You can check the type structure here

trueundefinedINavigationTreeData

AppLogo

React Node with Application Logo sgv

trueundefinedReactNode

insideGrid

should align in a grid

falsefalseboolean

*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).side navigation colapsada
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).side navigation expandida
  1. Open menu button: botão para abrir o menu.
  2. Close menu button: botão para colapsar o menu.
  3. Brand link: link para a página inicial do produto.
  4. Parent link: grupo com links internos.
  5. 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.

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.

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.

    conteúdo relacionado