Um componente de menu de navegação flexível com suporte para ícones, subitens, navegação por teclado e acessibilidade completa.
Adicione ícones personalizados aos itens do menu
Suporte para níveis ilimitados de submenu
Suporte completo ao teclado (Tab, setas, Enter, Escape)
Atributos ARIA e suporte a leitores de tela
npm install molde-ui
# or
pnpm add molde-ui
# or
yarn add molde-uiimport { Menu } from 'molde-ui';
import 'molde-ui/styles';
const menuItems = [
{
label: 'Home',
path: '/home',
icon: <HomeIcon />
},
{
label: 'Products',
path: '/products',
items: [
{ label: 'All Products', path: '/products/all' },
{ label: 'Categories', path: '/products/categories' }
]
}
];
function App() {
const [activePath, setActivePath] = useState('/home');
return (
<Menu
items={menuItems}
activePath={activePath}
onItemClick={(path) => setActivePath(path)}
/>
);
}| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
| items | MenuItemType[] | - | Array de itens do menu |
| activePath | string | '' | Caminho do item de menu atualmente ativo |
| onItemClick | (path: string, item: MenuItemType) => void | - | Callback quando um item é clicado |
| size | 'sm' | 'md' | 'lg' | 'md' | Tamanho dos itens do menu |
| variant | 'default' | 'compact' | 'default' | Estilo da variante |
| className | string | '' | Classes CSS adicionais |