Dropdown menu

A dropdown menu displays a list of actions or options to a user.

Default

Use default for the default dropdown menu appearance. The default menu will scroll after its height exceeds the pre-defined amount.


    import React from "react";
  
    import DropdownMenu from '@neoKit/dropdown-menu';
    import DropdownItem from '@neoKit/dropdown-item';
    
    const DropdownDefault = () => {
       
      return (
        DropdownMenu
        trigger="Page actions"
        type="button"
        onChange={(event) => {
          console.log(event);
        }}
      >
        <DropdownItem> sample 1</DropdownItem>
        <DropdownItem> sample 2</DropdownItem>
        <DropdownItem> sample 3</DropdownItem>
        <DropdownItem> sample 4</DropdownItem>
      </DropdownMenu>
      );
    };
  
  export default DropdownDefault;

Dropdown without arrow

The dropdown have custom arrows user can controll that


  import React from "react";

  import DropdownMenu from '@neoKit/dropdown-menu';
  import DropdownItem from '@neoKit/dropdown-item';
  
  const DropdownWithArrowExample = () => {
     
    return (
      <DropdownMenu
      trigger="Page actions"
      type="button"
      isArrow={false}
      onChange={(event) => {
        console.log(event);
      }}
    >
      <DropdownItem> sample 1</DropdownItem>
      <DropdownItem> sample 2</DropdownItem>
      <DropdownItem> sample 3</DropdownItem>
      <DropdownItem> sample 4</DropdownItem>
    </DropdownMenu>
    );
  };

export default DropdownWithArrowExample;

Should fit container

Use shouldFitContainer to fit the width of the dropdown menu to its parent width.


import React from "react";

import DropdownMenu from '@neoKit/dropdown-menu';
import DropdownItem from '@neoKit/dropdown-item';

const DropdownMenuShouldFitContainerExample = () => {
   
  return (
    <DropdownMenu
    shouldFitContainer
    trigger="Page actions"
    type="button"
    onChange={(event) => {
      console.log(event);
    }}
  >
    <DropdownItem> sample 1</DropdownItem>
    <DropdownItem> sample 2</DropdownItem>
    <DropdownItem> sample 3</DropdownItem>
    <DropdownItem> sample 4</DropdownItem>
  </DropdownMenu>
  );
};

export default DropdownMenuShouldFitContainerExample;

More button

user can change button icon


import React from "react";

import DropdownMenu from '@neoKit/dropdown-menu';
import DropdownItem from '@neoKit/dropdown-item';

const DropdownMenuMoreButtonExample = () => {
   
  return (
    <DropdownMenu
            trigger="Page actions"
            type="button"
            appearance="more"
            onChange={(event) => {
              console.log(event);
            }}
          >
            <DropdownItem> sample 1</DropdownItem>
            <DropdownItem> sample 2</DropdownItem>
            <DropdownItem> sample 3</DropdownItem>
            <DropdownItem> sample 4</DropdownItem>
          </DropdownMenu>
  );
};

export default DropdownMenuMoreButtonExample;

Tall

Use tall to control the height of the menu. The tall menu will not scroll until the height exceeds the height of the viewport.


import React from "react";

import DropdownMenu from '@neoKit/dropdown-menu';
import DropdownItem from '@neoKit/dropdown-item';

const DropdownMenuTallButtonExample = () => {
   
  return (
    <DropdownMenu
            trigger="Page actions"
            type="button"
            appearance="more"
            onChange={(event) => {
              console.log(event);
            }}
          >
          <DropdownItem> sample 1</DropdownItem>
          <DropdownItem> sample 2</DropdownItem>
          <DropdownItem> sample 3</DropdownItem>
          <DropdownItem> sample 4</DropdownItem>
          <DropdownItem> sample 5</DropdownItem>
          <DropdownItem> sample 6</DropdownItem>
          <DropdownItem> sample 7</DropdownItem>
          <DropdownItem> sample 8</DropdownItem>
          <DropdownItem> sample 9</DropdownItem>
          <DropdownItem> sample 10</DropdownItem>
          <DropdownItem> sample 11</DropdownItem>
          <DropdownItem> sample 12</DropdownItem>
          <DropdownItem> sample 13</DropdownItem>
          <DropdownItem> sample 14</DropdownItem>
          <DropdownItem> sample 15</DropdownItem>
          <DropdownItem> sample 16</DropdownItem>
          <DropdownItem> sample 17</DropdownItem>
          <DropdownItem> sample 18</DropdownItem>
          <DropdownItem> sample 19</DropdownItem>
          <DropdownItem> sample 20</DropdownItem>
          <DropdownItem> sample 21</DropdownItem>
          <DropdownItem> sample 22</DropdownItem>
          <DropdownItem> sample 23</DropdownItem>
          <DropdownItem> sample 24</DropdownItem>
          </DropdownMenu>
  );
};

export default DropdownMenuTallButtonExample;