Um componente de menu flutuante com toast no hover, perfeito para navegação inferior, barras laterais ou qualquer necessidade de navegação flutuante. Suporta 12 posições diferentes com animações suaves e efeitos.
Inferior, superior, esquerda, direita com variantes start, center e end
Tooltip bonito aparece no hover com animações suaves
Adicione ícones personalizados a cada item do menu
Permanece na posição durante a rolagem
npm install molde-ui
# or
pnpm add molde-ui
# or
yarn add molde-uiimport { FloatingMenu } from 'molde-ui';
import 'molde-ui/styles';
const menuItems = [
{
label: 'Home',
path: '/home',
icon: <HomeIcon />
},
{
label: 'Profile',
path: '/profile',
icon: <ProfileIcon />
},
{
label: 'Settings',
path: '/settings',
icon: <SettingsIcon />
}
];
function App() {
const [activePath, setActivePath] = useState('/home');
return (
<FloatingMenu
items={menuItems}
activePath={activePath}
onItemClick={(path) => setActivePath(path)}
position="bottomCenter"
/>
);
}Container 800 × 600px
O FloatingMenu está posicionado dentro deste container. Tente mudar a posição para ver como ele se adapta!
Caminho Ativo: /home
Posição Atual: bottomCenter
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
| items | FloatingMenuItemType[] | - | Array de itens do menu |
| activePath | string | '' | Caminho do item de menu atualmente ativo |
| onItemClick | (path: string, item: FloatingMenuItemType) => void | - | Callback quando um item é clicado |
| position | 'bottomCenter' | 'bottomStart' | 'bottomEnd' | 'topCenter' | 'topStart' | 'topEnd' | 'left' | 'leftStart' | 'leftEnd' | 'right' | 'rightStart' | 'rightEnd' | 'bottomCenter' | Posição do menu flutuante |
| showFloatingContainer | boolean | true | Exibir o fundo do container flutuante |
| className | string | '' | Classes CSS adicionais |