
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
@highlight-ui/dropdown-menu
Advanced tools
Using npm:
npm install @highlight-ui/dropdown-menu
Using yarn:
yarn add @highlight-ui/dropdown-menu
Using pnpm:
pnpm install @highlight-ui/dropdown-menu
In your (S)CSS file:
@import url('@highlight-ui/dropdown-menu');
Once the package is installed, you can import the library:
import {
DropdownMenu,
DropdownMenuItem,
DropdownMenuList,
DropdownMenuToggle,
} from '@highlight-ui/dropdown-menu';
import React from 'react';
import {
DropdownMenu,
DropdownMenuToggle,
DropdownMenuList,
DropdownMenuItem,
} from '@highlight-ui/dropdown-menu';
import { Button } from '@highlight-ui/button';
export default function DropdownMenuExample() {
return (
<DropdownMenu>
<DropdownMenuToggle>
<Button buttonState={disabled ? 'disabled' : undefined}>
Toggle Me!
</Button>
</DropdownMenuToggle>
<DropdownMenuList direction={direction} title={title}>
<DropdownMenuItem
onClick={() => {
console.log('clicked!');
}}
>
Item label (as Button)
</DropdownMenuItem>
<DropdownMenuItem
href="https://personio.com"
target="_blank"
rel="noopener noreferrer"
>
Item label (as Link)
</DropdownMenuItem>
<DropdownMenuItem disabled>Item label (disabled)</DropdownMenuItem>
</DropdownMenuList>
</DropdownMenu>
);
}
Prop | Type | Required | Default | Description |
---|---|---|---|---|
open | boolean | No | false | Whether the dropdown is open or not |
defaultValue | boolean | No | false | Default open value |
className | string | No | Allows providing a custom class name to the DIV element that surrounds the text | |
closeOnClickAnywhere | boolean | No | false | Enables closing the dropdown menu when clicking inside |
disabled | boolean | No | false | Prevents the open state of the dropdown menu from changing (Only works when the open prop is not being used) |
onChange | () => void | No | Callback triggered whenever the open state of the dropdown menu is changed (Only works when the open prop is not being used) | |
onClose | () => void | No | Callback triggered whenever the dropdown menu is closed (Only works when the open prop is not being used) | |
onOpen | () => void | No | Callback triggered whenever the dropdown menu is opened (Only works when the open prop is not being used) | |
onRequestToChange | () => void | No | Callback triggered when the open state of the dropdown menu is about to change (Only works when the open prop is in use) |
Prop | Type | Required | Default | Description |
---|---|---|---|---|
className | string | No | Allows providing a custom class name to the toggle | |
disabled | boolean | No | false | Prevents the open state of the dropdown menu from changing |
onToggle | () => void | No | Callback triggered whenever the open state of the dropdown menu is changed |
Prop | Type | Required | Default | Description |
---|---|---|---|---|
open | boolean | No | false | Whether the dropdown is open or not |
className | string | No | Allows providing a custom class name to the list | |
containerWidth | number | No | 0 | The max width of the container |
direction | 'bottom-left', 'bottom-right', 'center', 'top-left', 'top-right' | No | bottom-right | The direction that the menu should open from - relative to the trigger |
onToggle | () => void | No | Callback triggered whenever the open state of the dropdown menu is changed | |
preventToCloseOnClick | boolean | No | false | Prevents the close on click |
title | string | No | Gives this dropdown a title |
The DropdownMenuItem gets its props from the
a
andbutton
types.
Please visit personio.design for usage guidelines and visual examples.
If you're interested in contributing, please visit our contribution page.
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.