@ndla/dropdown-menu
TypeScript icon, indicating that this package has built-in type declarations

1.0.38 • Public • Published

ndla-dropdown-menu

Dropdown menu component based on @radix-ui/react-dropdown-menu

Installation

yarn add --save @ndla/dropdown-menu
npm install @ndla/dropdown-menu --save

Usage

Only DropdownContent is styled, and can be targeted as one usually does with emotion. The content arrow indicator can be styled by targeting [data-arrow].

Basic example

import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from "@ndla/dropdown-menu";

return (
  <DropdownMenu>
    <DropdownTrigger>
      <IconButtonV2 aria-label="Show more" title="Show more" variant="ghost" colorTheme="light">
        <HorizontalMenu />
      </IconButtonV2>
    </DropdownTrigger>
    <DropdownContent {...args}>
      <DropdownItem>
        <StyledButton variant="ghost" colorTheme="light" shape="sharp" size="small" fontWeight="normal">
          <Folder />
          Add item
        </StyledButton>
      </DropdownItem>
      <DropdownItem>
        <StyledButton variant="ghost" colorTheme="danger" shape="sharp" size="small" fontWeight="normal">
          <DeleteForever />
          Delete item
        </StyledButton>
      </DropdownItem>
    </DropdownContent>
  </DropdownMenu>
);

/@ndla/dropdown-menu/

    Package Sidebar

    Install

    npm i @ndla/dropdown-menu

    Weekly Downloads

    135

    Version

    1.0.38

    License

    GPL-3.0

    Unpacked Size

    58.2 kB

    Total Files

    18

    Last publish

    Collaborators

    • kronen_ki
    • rauboti
    • mapoken
    • katrinewi
    • ndlauser
    • jonasc-knowit
    • gunnarvelle
    • jnatten