React bootstrap dropdown

React-Bootstrap is a front-end framework that was designed keeping react in mind. Dropdown Componentprovides a way to displaying lists of links or more actions within a menu when clicked over it. We can use the following approach in ReactJS to use the react-bootstrap Dropdown Component.

Dropdown Props:

• alignRight: It is used to align the menu to the right side of the Dropdown toggle.
• as: It can be used as a custom element type for this component.
• drop: It is used to determine the location and direction of the Menu in relation to its toggle.
• flip: It is used to flip the dropdown in case of overlapping on the reference element.
• focusFirstItemOnShow: When the dropdown is opened, it is used to control the focus behavior for it.
• navbar: It is the attribute that is by default false and indicates whether dropdown is navbar related or not.
• onSelect: It is a callback function that is triggered when a menu item is selected.
• onToggle: It is used to trigger a callback when the visibility of the dropdown needs to be changed.
• show: It is used to indicate whether the dropdown is visible or not.
• bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

SplitButton Props:

• disabled: It is used to disable the button.
• href: It is used to pass the href attribute to the underlying non-toggle button.
• id: It is the general HTML id attribute for the toggle button.
• menuAlign: It is used to responsively align the dropdown menu.
• menuRole: It is used for the ARIA accessible role applied which is applied to the menu component.
• onClick: It is the callback function that is passed as a handler for the non-toggle button.
• renderMenuOnMount: It is used to indicate whether to render the dropdown menu before the first time it is shown in the DOM.
• rootCloseEvent: It is used to close the component when which event is triggered outside this component.
• size: It denotes the size of the component.
• target: For the non-toggle Button, it is an anchor target passed to it.
• title: It is used to define the content of non-toggle Button.
• toggleLabel: For the toggle button, it is the accessible label.
• type: It is used to pass the type for the non-toggle button.
• variant: It is used to indicate the style variant for it.
• bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

Dropdown.Toggle Props:

• as: It can be used as a custom element type for this component.
• childBsPrefix: It is used for the DropdownButtonto pass through to the underlying button or whatever from it.
• eventKey: It is used to uniquely identify the dropdown toggle component.
• id: It is used to pass the HTML id attribute to this element.
• split: It is used to pass the split attribute to this element.
• bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

Dropdown.Menu Props:

• align: It is used for the dropdown menu to align it to the specified side of the container.
• alignRight: It is used for the dropdown menu to align it to the right side of the container.
• as: It can be used as a custom element type for this component.
• flip: It is used to flip the dropdown to its opposite placement.
• onSelect: It is a callback function that is triggered when the menu item is selected.
• popperConfig: It is used to pass the set of popper options to the popper directly.
• renderOnMount: It is used to indicate whether to render the dropdown menu before the first time it is shown in the DOM.
• rootCloseEvent: It is used to close the component when which event is triggered outside this component.
• show: It is used to indicate whether the dropdown menu is visible or not.
• bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

Dropdown.Item Props:

• active: It can be used to mark the menu item as active.
• as: It can be used as a custom element type for this component.
• disabled: It is used to make the menu item disabled.
• eventKey: It is used to uniquely identify the selected menu item.
• href: It is used to pass the href attribute to this element.
• onClick: It is a callback function that is triggered when the menu item is clicked.
• onSelect: It is a callback function that is triggered when the menu item is selected.
• bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

Dropdown.Header Props:

• as: It can be used as a custom element type for this component.
• bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

Dropdown.Divider Props:

• as: It can be used as a custom element type for this component.
• bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.

Creating React Application And Installing Module:

• Step 1: Create a React application using the following command:

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command:

  cd foldername

• Step 3: After creating the ReactJS application, Install therequiredmodule using the following command:

  npm install react-bootstrap npm install bootstrap

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Step to Run Application: Run the application using the following command from the root directory of the project:

Output: Now open your browser and go to http://localhost/, you will see the following output:

Reference:https://react-bootstrap.github.io/components/dropdowns/

const MenuContainer =styled("div")`

display: ${(p)=>(p.show ?"flex":"none")};

min-width: px;

position: absolute;

z-index: ;

flex-direction: column;

border: 1px solid #e5e5e5;

background-color: white;

box-shadow: 0 5px 15px rgba(0, 0, 0, );

`;

constMenu=({ role })=>{

const{ show, onClose, props }=useDropdownMenu({

flip:true,

offset:[0,8],

});

return(

<MenuContainer{props}role={role}show={show}>

<button

type="button"

onClick={onClose}

className="text-left hover:bg-brand px-6 py-2"

>

Item 1

</button>

<button

type="button"

onClick={onClose}

className="text-left hover:bg-brand px-6 py-2"

>

Item 2

</button>

</MenuContainer>

);

};

constToggle=({ id, children })=>{

const[props,{ show, toggle }]=useDropdownToggle();

return(

<button

type="button"

className="btn"

id={id}

{props}

onClick={toggle}

>

{children}

</button>

);

};

constDropdownButton=({

show,

onToggle,

drop,

alignEnd,

title,

role,

})=>(

<Dropdown

show={show}

onToggle={onToggle}

drop={drop}

alignEnd={alignEnd}

itemSelector="button:not(:disabled)"

>

{({ props })=>(

<div{props}className="relative inline-block">

<Toggleid="example-toggle">{title}</Toggle>

<Menurole={role}/>

</div>

)}

</Dropdown>

);

const ButtonToolbar =styled("div")`

& > * + * {

margin-left: 12px;

}

`;

const[show, setShow]=useState(false);

<ButtonToolbarclassName="dropdown-example">

<DropdownButton

show={show}

onToggle={(nextShow)=>setShow(nextShow)}

title={`${show ?"Close":"Open"} Dropdown`}

/>

<DropdownButtonalignEndtitle="Align right"/>

<DropdownButtondrop="up"title="Drop up"/>

<DropdownButtonrole="menu"title="Role 'menu'"/>

</ButtonToolbar>;

Best JavaScript code snippets using react-bootstrap.DropdownButton(Showing top 15 results out of )

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin

Overview#

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. Like overlays, Dropdowns are built using a third-party library Popper.js, which provides dynamic positioning and viewport detection.

Accessibility#

The WAIARIA standard defines a widget, but it's very specific to a certain kind of menu. ARIA menus, must only contain , , or .

On the other hand, Bootstrap's dropdowns are designed to more generic and application in a variety of situations. For this reason we don't automatically add the menu roles to the markup. We do implement some basic keyboard navigation, and if you do provide the "menu" role, react-bootstrap will do its best to ensure the focus management is compliant with the ARIA authoring guidelines for menus.

Examples#

Single button dropdowns#

The basic Dropdown is composed of a wrapping and inner , and . By default the will render a component and accepts all the same props.

Since the above is such a common configuration react-bootstrap provides the component to help reduce typing. Provide a prop and some s and you're ready to go.

DropdownButton will forward Button props to the underlying Toggle component

Split button dropdowns#

Similarly, You create a split dropdown by combining the Dropdown components with another Button and a ButtonGroup.

As with DropdownButton, is provided as convenience component.

Sizing#

Dropdowns work with buttons of all sizes.

Dark dropdowns#

Opt into darker dropdowns to match a dark navbar or custom style by adding onto an existing . Alternatively, use when using the component.

Using in a :

Drop directions#

Trigger dropdown menus above, below, left, or to the right of their toggle elements, with the prop.

A simple Dropdown Menu for React. Commonly used as a 'User Settings' menu on websites where users login.

Installation

Include bootstrap in your project(if not already included)

Usage

A simple example using OnClick events. Download and run the demo for more examples, or browse the examples.

DropdownMenu props

MenuItem props

Css Override

The following CSS(as JS) can be passed to the via the prop to override color, padding etc. NOTE: only applies to the child component.

Download Examples

Backlog

• More Error handling.
• Extend CSS styling so that user defined styles can be passed in as props.

#

alignEnd

#

childrenrequired

#

flip

#

offset

#

popperConfig

#

rootCloseEvent

#

show

#

usePopper