@aristobyte-ui/dropdown

> A fully typed, modular, and composable Dropdown component built for AristoByteUI, leveraging Button for interactive triggers and providing lightweight, performant, and flexible menus for React applications.

📦 Installation

``bash


Install via Yarn

`

🛠 Usage

`tsx
import { Dropdown } from '@aristobyte-ui/dropdown';
import { Button } from '@aristobyte-ui/button';

export default function Example() {
return (
trigger={Options}
items={[
{ label: 'Profile', onClick: () => console.log('Profile clicked') },
{ label: 'Settings', onClick: () => console.log('Settings clicked') },
{ label: 'Logout', onClick: () => console.log('Logout clicked') },
]}
placement="bottom-start"
disabled={false}
/>
);
}
`

##📂 Presets Available

- trigger: Any React element, commonly a Button, to toggle the dropdown.
- items: Array of menu items, each with label, optional icon, and onClick callback.
- placement: Positioning of the dropdown menu (e.g., top, bottom, left, right with variations like -start or -end).
- disabled: Boolean to disable the dropdown trigger.

🔧 Example in a Package

`tsx
import { Dropdown } from '@aristobyte-ui/dropdown';
import { Button } from '@aristobyte-ui/button';
import { FiSettings, FiUser } from 'react-icons/fi';

export function UserMenu() {
return (
trigger={

Menu

}
items={[
{
label: 'Profile',
icon: FiUser,
onClick: () => console.log('Profile'),
},
{
label: 'Settings',
icon: FiSettings,
onClick: () => console.log('Settings'),
},
{ label: 'Logout', onClick: () => console.log('Logout') },
]}
placement="bottom-end"
/>
);
}
``

📊 Why This Matters

- Performance-first: Lightweight CSS ensures fast rendering and smooth transitions.
- Fully typed: TypeScript-first API ensures predictable usage and IDE autocomplete.
- AristoByteUI ready: Seamlessly integrates with design tokens, SCSS modules, and Button component composition.
- Flexible: Supports multiple variants, appearances, sizes, radius options, icons, ripple-enabled interactive feedback, and nested menu structures.

🏆 Philosophy

- Modular architecture: Dropdown component is fully composable with Button and other interactive elements.
- Declarative styling: SCSS modules keep styles maintainable and scoped.
- Strict typing & runtime flexibility: Props fully typed while allowing runtime overrides.
- Developer experience optimized: Easy to use with predictable behavior and minimal boilerplate.

📜 License

MIT © AristoByte

🛡 Shields Showcase