Hudoro Menu
Hudoro Menu is a strict and customizable menu component for web development projects, designed for simplicity and adherence to strict design guidelines.
Instal package using pnpm
Instal package using yarn
Instal package using npm
import package to your project
import {
MenuBody,
MenuButton,
MenuFooter,
MenuHeading,
MenuLists,
} from '@hudoro/menu'
Usage/Examples (you can combine using any package hudoro)
import {
MenuBody,
MenuButton,
MenuFooter,
MenuHeading,
MenuLists,
} from '@hudoro/menu'
const App = () => {
return (
// You can use it in two ways
// 1 is with pattern
<WithPattern/>
// 2 is without pattern
<WithOutPattern/>
);
};
const WithPattern = () => {
return (
<Menu position="bottom-left">
<MenuButton>
<button>button</button>
</MenuButton>
<MenuLists>
<MenuHeading>heading</MenuHeading>
<MenuBody>pu list you ned</MenuBody>
<MenuFooter>footer</MenuFooter>
</MenuLists>
</Menu>
)
}
const WithOutPattern = () => {
return (
<Menu position="bottom-right">
<MenuButton>
<button>button</button>
</MenuButton>
<MenuLists>
<div>
put anything you want
</div>
</MenuLists>
</Menu>
)
}
Props @hudoro/menu
Props that you can pass to <Menu {...props}>
Prop Name |
Type |
Value |
Default |
required |
description |
children |
ReactNode |
ReactNode |
ReactNode |
true |
any html element |
position |
string |
"bottom-left" / "bottom-right" / "top-left" / "top-right" |
'bottom-left' |
false |
position for menu lists |
Props that you can pass to <MenuButton {...props}>
Prop Name |
Type |
Value |
Default |
required |
description |
children |
ReactNode |
ReactNode |
ReactNode |
true |
any html element |
Props that you can pass to <MenuLists {...props}>
Prop Name |
Type |
Value |
Default |
required |
description |
children |
ReactNode |
ReactNode |
ReactNode |
true |
any html element |
Props that you can pass to <MenuHeading {...props}>
Prop Name |
Type |
Value |
Default |
required |
description |
children |
ReactNode |
ReactNode |
ReactNode |
true |
any html element |
Props that you can pass to <MenuBody {...props}>
Prop Name |
Type |
Value |
Default |
required |
description |
children |
ReactNode |
ReactNode |
ReactNode |
true |
any html element |
Props that you can pass to <MenuFooter {...props}>
Prop Name |
Type |
Value |
Default |
required |
description |
children |
ReactNode |
ReactNode |
ReactNode |
true |
any html element |