tuv Menu

tuv 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 @tuv/menu

Instal package using yarn

  yarn add @tuv/menu

Instal package using npm

  npm i @tuv/menu

import package to your project

  import {
  MenuBody,
  MenuButton,
  MenuFooter,
  MenuHeading,
  MenuLists,
} from '@tuv/menu'

Usage/Examples (you can combine using any package tuv)

 import {
  MenuBody,
  MenuButton,
  MenuFooter,
  MenuHeading,
  MenuLists,
} from '@tuv/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 @tuv/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 |