Menu

MenuItem

Examples

Basic usage

Loading...

Code

import { MenuItem } from "blue-react"

export default function BasicUsage() {
    return (
        <MenuItem
            iconBefore={
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"></path>
                </svg>
            }
            label="Parent"
        />
    )
}

Behave as collapse group

Loading...

Code

import { DropletFill } from "react-bootstrap-icons"
import { MenuItem } from "blue-react"

export default function AsCollapseGroupExample() {
    return (
        <MenuItem iconBefore={<DropletFill />} label="Parent" as="collapse-group">
            <MenuItem label="Child 1" />
            <MenuItem label="Child 2" />
        </MenuItem>
    )
}

Behave as collapse

Loading...

Code

import { Backpack2Fill } from "react-bootstrap-icons"
import { MenuItem } from "blue-react"

export default function AsCollapseExample() {
    return (
        <MenuItem iconBefore={<Backpack2Fill />} label="Parent" as="collapse">
            <MenuItem label="Child 1" />
            <MenuItem label="Child 2" />
        </MenuItem>
    )
}

Behave as popover group

Loading...

Code

import { MenuItem } from "blue-react"

export default function AsPopoverGroupExample() {
    return (
        <MenuItem label="Open popover" as="popover-group">
            <MenuItem label="Sub item 1" />
            <MenuItem label="Sub longer item 2" />
        </MenuItem>
    )
}

Current

Loading...

Code

import { useState } from "react"
import { MenuItem } from "blue-react"
import { BrightnessHigh, BrightnessHighFill } from "react-bootstrap-icons"

export default function Current() {
    const [currentItem, setCurrentItem] = useState("item-1")

    return (
        <div className="vstack">
            <MenuItem
                icon={<BrightnessHigh />}
                iconForCurrent={<BrightnessHighFill />}
                label="Item 1"
                current={currentItem === "item-1"}
                onClick={() => setCurrentItem("item-1")}
            />

            <MenuItem
                icon={<BrightnessHigh />}
                label="Item 2"
                current={currentItem === "item-2"}
                onClick={() => setCurrentItem("item-2")}
            />
        </div>
    )
}

Custom element type

Loading...

Code

import { type ComponentProps } from "react"
import { MenuItem } from "blue-react"

const CustomNavLink = ({ ...props }: ComponentProps<"a">) => <a {...props} />

export default function CustomElementTypeExample() {
    return (
        <>
            <p>
                You might want to use Menu Item for navigating with your own router solution. For this case you can use
                the <code>elementType</code> prop to set the link component of your router library.
                <br />
                In this example I use React Router and create <code>CustomNavLink</code> and make sure the class name
                for the active link is <code>current</code>.
            </p>

            <MenuItem elementType={CustomNavLink} label="Menu Item" to="/component/MenuItem" />
        </>
    )
}

Horizontal

Loading...

Code

import { useState } from "react"
import { MenuItem } from "blue-react"

export default function Horizontal() {
    const [currentItem, setCurrentItem] = useState("item-1")

    return (
        <div className="hstack blue-horizontal">
            <MenuItem
                iconBefore={
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                        <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"></path>
                    </svg>
                }
                label="Item 1"
                current={currentItem === "item-1"}
                onClick={() => setCurrentItem("item-1")}
            />

            <MenuItem
                iconBefore={
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                        <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"></path>
                    </svg>
                }
                label="Item 2"
                current={currentItem === "item-2"}
                onClick={() => setCurrentItem("item-2")}
            />
        </div>
    )
}

Is active

Loading...

Code

import { MenuItem } from "blue-react"

export default function IsActiveExample() {
    return <MenuItem label="I am active" active />
}

Props

Name Description Type Default
elementType ElementType<any, keyof IntrinsicElements>
variant ButtonVariant
sm boolean
lg boolean
iconBefore ReactNode
iconAfter ReactNode
label string
labelHidden boolean
busy boolean
success Button will be displayed as successful for 3 seconds. boolean
active boolean
square Button's width and height should be equal. Useful, if you want your body only to have one symbol. When your body only has an icon and hidden label, this will be set automatically. boolean
to For compatibility with React Router NavLink string
exact For compatibility with React Router NavLink boolean
current boolean
defaultDisplay boolean
buttonContent ReactNode
icon Uses `iconBefore` slot. If `iconForCurrent` and menu item is current, this will be hidden. ReactNode
iconForCurrent Uses `iconBefore` slot. If menu item is current, this will be visible. ReactNode
as "collapse" | "collapse-group" | "popover-group"
Edit post on GitHub

On this page

On this page