Logo
Chakra-UIReactJsNext.JS
Head

@codecraftkit

Documentation

Menu

Description#

An accessible dropdown menu for the common dropdown menu button.

Import#

it can be imported from the core.

Code Example

import { Menu  } from "@codecraftkit/core";

or alone.

Code Example

import Menu  from "@codecraftkit/menu";

Usage#

It can be used in three different ways

With body#

You could also pass a React component throughout the body

Code Example

<Menu label="Menu" body="Hello World" />

With children#

Using its children, and the close button

Code Example

<Menu variant="ghost" label="Menu">
Hello World, using its <Code>children</Code>
</Menu>

With Menu Items#

With menu items takes an array of items similar of how the navbar works, the items must contain a label and href, the href could be changed for route or action

Also you can group the items using the group key as shown below

Code Example

function myApp(){
const menuItems = [
    {
      route: '/alert',
      label: 'Alert'
    }, {
      group:'Group Links',
      items:[
          {
            route: '/data-table',
            label: 'DataTable'
          },
          {
            href: 'https://chakra-ui.com/',
            label: 'Chakra'
          },
          {
            action: () => alert('Hello'),
            label: 'Hello'
          }
       ]},
  ]
  return <Menu label="Menu" menuItems={menuItems} />
}

Props#

name

type

required

default

description

label

String

yes

The button label

icon

Icon

Show the button as an icon

menuItems

Array<object>

no

It put the items as a list

body

StringReact Component

no

The content of the menu

children

React Component

no

The content of the menu, but you can use the children prop

trigger

ReactComponent

no

Custom Trigger Component

variant

solidlinkoutlineghostunstyled

no

solid

Button style variant

styles

styles<object>

no

Apply custom styles for the button

...rest

chakra style props

no

Other Props That received the Menu ComponentChakra ui Menu