@tuv-indo/menu

Hudoro Menu

Hudoro Menu is a strict and customizable menu component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/menu

Instal package using yarn

  yarn add @hudoro/menu

Instal package using npm

  npm i @hudoro/menu

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