DS | Adila.coComponentes
Bottom Bar
Navegação inferior para mobile com acesso à navegação completa em um drawer.
Conteúdo do aplicativo
A bottom bar permanece acessível na parte inferior da tela.
Instalação
bun add @adila-sh/uiUso
Use os itens mais importantes diretamente na barra. O último item abre um drawer com todos os itens disponíveis na sidebar.
<BottomBar>
<BottomBarList>
<BottomBarItem>
<BottomBarButton render={<a href="/" />} isActive>
<HouseIcon />
<BottomBarLabel>Início</BottomBarLabel>
</BottomBarButton>
</BottomBarItem>
<BottomBarItem>
<BottomBarDrawer>
<BottomBarDrawerTrigger>
<DotsThreeIcon />
<BottomBarLabel>Menu</BottomBarLabel>
</BottomBarDrawerTrigger>
<BottomBarDrawerContent>
{/* Renderize aqui todos os itens da sidebar. */}
</BottomBarDrawerContent>
</BottomBarDrawer>
</BottomBarItem>
</BottomBarList>
</BottomBar>O componente fica oculto a partir do breakpoint md e inclui automaticamente o
espaço seguro de dispositivos com indicador de início.