React-Bootstrap Dropdowns AutoClose Autoclose attributes
- true: By using this property the dropdown is closed when the user clicks on a dropdown item or outside the dropdown.
- false: By using this property the dropdown must be manually closed by clicking on the toggle button.
- inside: By using this property the dropdown is closed only when a dropdown item is clicked.
- outside: By using this property the dropdown is closed only when the region outside the dropdown is clicked.
Syntax:
<Dropdown autoClose="value">
<Dropdown.Toggle>
Title
</Dropdown.Toggle>
</Dropdown>
Example 1: In this example, we will learn about autoClose true and false options.
Javascript
import { Dropdown } from 'react-bootstrap' ; const App = () => { return ( <div className= "App" > <h1 style= {{ color: 'green' , textAlign: 'center' }}> w3wiki</h1> <h5 style= {{ textAlign: 'center' }}> React-Bootstrap Dropdowns AutoClose</h5> <div style={{ textAlign: 'center' }}> <Dropdown className= "my-2" autoClose={ true }> <Dropdown.Toggle variant= "dark" > Courses(autoClose = True) </Dropdown.Toggle> <Dropdown.Menu> <Dropdown.Item> Data Structures and Algorithms </Dropdown.Item> <Dropdown.Item> Java Backend </Dropdown.Item> <Dropdown.Item> Frontend Engineer </Dropdown.Item> <Dropdown.Item> Backend Engineer </Dropdown.Item> </Dropdown.Menu> </Dropdown> <Dropdown className= "my-2" autoClose={ false }> <Dropdown.Toggle variant= "dark" > Courses(autoClose = False) </Dropdown.Toggle> <Dropdown.Menu> <Dropdown.Item> Data Structures and Algorithms </Dropdown.Item> <Dropdown.Item> Java Backend </Dropdown.Item> <Dropdown.Item> Frontend Engineer </Dropdown.Item> <Dropdown.Item> Backend Engineer </Dropdown.Item> </Dropdown.Menu> </Dropdown> </div> </div> ); }; export default App; |
Output:
Example 2: In this example, we will learn about autoClose inside and outside options.
Javascript
import { Dropdown } from 'react-bootstrap' ; const App = () => { return ( <div className= "App" > <h1 style= {{ color: 'green' , textAlign: 'center' }}> w3wiki</h1> <h5 style= {{ textAlign: 'center' }}> React-Bootstrap Dropdowns AutoClose </h5> <div style={{ textAlign: 'center' }}> <Dropdown className= "my-4" autoClose= 'inside' > <Dropdown.Toggle variant= "dark" > Courses(autoClose = Inside) </Dropdown.Toggle> <Dropdown.Menu> <Dropdown.Item> Data Structures and Algorithms </Dropdown.Item> <Dropdown.Item> Java Backend</Dropdown.Item> <Dropdown.Item> Frontend Engineer</Dropdown.Item> <Dropdown.Item> Backend Engineer</Dropdown.Item> </Dropdown.Menu> </Dropdown> <Dropdown className= "my-4" autoClose= 'outside' > <Dropdown.Toggle variant= "dark" > Courses(autoClose = Outside) </Dropdown.Toggle> <Dropdown.Menu> <Dropdown.Item> Data Structures and Algorithms </Dropdown.Item> <Dropdown.Item> Java Backend</Dropdown.Item> <Dropdown.Item> Frontend Engineer</Dropdown.Item> <Dropdown.Item> Backend Engineer</Dropdown.Item> </Dropdown.Menu> </Dropdown> </div> </div> ); }; export default App; |
Output:
React-Bootstrap Dropdowns AutoClose
React-Bootstrap Dropdown Autoclose is a feature that allows you to manage how dropdown menus automatically close. By default, when a menu item is selected or when a user clicks outside the dropdown, it closes.