Bootstrapのドロップダウンプラグインを使用して、リンクリストなどを表示するためのコンテキストオーバーレイを切り替えます。
ドロップダウンは、リンクのリストなどを表示するための、切り替え可能なコンテキストオーバーレイです。オーバーレイと同様に、ドロップダウンはサードパーティライブラリであるPopper.jsを使用して構築されており、動的な配置とビューポート検出を提供します。
アクセシビリティ
WAI ARIA標準では、role="menu"ウィジェットが定義されていますが、これは特定の種類のメニューに非常に限定的です。ARIAメニューは、role="menuitem"、role="menuitemcheckbox"、またはrole="menuitemradio"のみを含める必要があります。
一方、Bootstrapのドロップダウンは、より汎用的で、さまざまな状況で適用できるように設計されています。このため、メニューの役割をマークアップに自動的に追加することはありません。基本的なキーボードナビゲーションを実装しており、「メニュー」の役割を提供する場合、react-bootstrapはフォーカス管理がメニューのARIAオーサリングガイドラインに準拠するように最善を尽くします。
基本的なドロップダウンは、ラップするDropdownと内部の<DropdownMenu>、および<DropdownToggle>で構成されます。デフォルトでは、<DropdownToggle>はButtonコンポーネントをレンダリングし、すべて同じプロパティを受け入れます。
import Dropdown from 'react-bootstrap/Dropdown';
function BasicExample() {
return (
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
export default BasicExample;
上記は非常に一般的な構成であるため、react-bootstrapは入力を減らすために<DropdownButton>コンポーネントを提供しています。titleプロパティと einige <DropdownItem>を提供すれば、準備完了です。
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function BasicButtonExample() {
return (
<DropdownButton id="dropdown-basic-button" title="Dropdown button">
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</DropdownButton>
);
}
export default BasicButtonExample;
DropdownButtonは、Buttonプロパティを基礎となるToggleコンポーネントに転送します。
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function VariantsExample() {
return (
<>
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
(variant) => (
<DropdownButton
as={ButtonGroup}
key={variant}
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase()}
title={variant}
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3" active>
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
),
)}
</>
);
}
export default VariantsExample;
同様に、Dropdownコンポーネントを別のButtonとButtonGroupと組み合わせることで、分割ドロップダウンを作成します。
import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
function SplitBasicExample() {
return (
<Dropdown as={ButtonGroup}>
<Button variant="success">Split Button</Button>
<Dropdown.Toggle split variant="success" id="dropdown-split-basic" />
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
export default SplitBasicExample;
DropdownButtonと同様に、SplitButtonは便利なコンポーネントとして提供されています。
import Dropdown from 'react-bootstrap/Dropdown';
import SplitButton from 'react-bootstrap/SplitButton';
function SplitVariantExample() {
return (
<>
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
(variant) => (
<SplitButton
key={variant}
id={`dropdown-split-variants-${variant}`}
variant={variant.toLowerCase()}
title={variant}
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3" active>
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
),
)}
</>
);
}
export default SplitVariantExample;
サイズ設定
ドロップダウンは、あらゆるサイズのボタンで機能します。
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import SplitButton from 'react-bootstrap/SplitButton';
function ButtonSizesExample() {
return (
<>
<div className="mb-2">
{[DropdownButton, SplitButton].map((DropdownType, idx) => (
<DropdownType
as={ButtonGroup}
key={idx}
id={`dropdown-button-drop-${idx}`}
size="lg"
title="Drop large"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownType>
))}
</div>
<div>
{[DropdownButton, SplitButton].map((DropdownType, idx) => (
<DropdownType
as={ButtonGroup}
key={idx}
id={`dropdown-button-drop-${idx}`}
size="sm"
variant="secondary"
title="Drop small"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownType>
))}
</div>
</>
);
}
export default ButtonSizesExample;
ダークドロップダウン
既存のDropdownMenuにvariant="dark"を追加することで、暗いナビゲーションバーまたはカスタムスタイルに一致するように、暗いドロップダウンを選択できます。または、DropdownButtonコンポーネントを使用する場合は、menuVariant="dark"を使用します。
コンポーネントのダークバリアントは、Bootstrap v5.3.0でカラモードが導入されたことで非推奨になりました。variant="dark"を追加する代わりに、ルート要素、親ラッパー、またはコンポーネント自体にdata-bs-theme="dark"を設定します。
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function ButtonDarkExample() {
return (
<>
<Dropdown data-bs-theme="dark">
<Dropdown.Toggle id="dropdown-button-dark-example1" variant="secondary">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1" active>
Action
</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#/action-4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<DropdownButton
id="dropdown-button-dark-example2"
variant="secondary"
title="Dropdown button"
className="mt-2"
data-bs-theme="dark"
>
<Dropdown.Item href="#/action-1" active>
Action
</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#/action-4">Separated link</Dropdown.Item>
</DropdownButton>
</>
);
}
export default ButtonDarkExample;
NavDropdownでmenuVariant="dark"を使用する
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
function NavbarDarkExample() {
return (
<Navbar variant="dark" bg="dark" expand="lg">
<Container fluid>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="navbar-dark-example" />
<Navbar.Collapse id="navbar-dark-example">
<Nav>
<NavDropdown
id="nav-dropdown-dark-example"
title="Dropdown"
menuVariant="dark"
>
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
export default NavbarDarkExample;
ドロップダウン方向
dropプロパティを使用して、ドロップダウンメニューを、切り替え要素の上、下、左、または右にトリガーします。
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import SplitButton from 'react-bootstrap/SplitButton';
function DropDirectioExample() {
return (
<>
<div className="mb-2">
{['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
(direction) => (
<DropdownButton
as={ButtonGroup}
key={direction}
id={`dropdown-button-drop-${direction}`}
drop={direction}
variant="secondary"
title={` Drop ${direction} `}
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
),
)}
</div>
<div>
{['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
(direction) => (
<SplitButton
key={direction}
id={`dropdown-button-drop-${direction}`}
drop={direction}
variant="secondary"
title={`Drop ${direction}`}
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
),
)}
</div>
</>
);
}
export default DropDirectioExample;
ドロップダウンアイテム
従来、ドロップダウンメニューの内容はリンクである必要がありましたが、v4ではなくなりました。これで、ドロップダウンで<a>だけでなく、オプションで<button>要素を使用できるようになりました。
<Dropdown.ItemText>を使用して、非インタラクティブなドロップダウンアイテムを作成することもできます。カスタムCSSまたはテキストユーティリティを使用して、さらにスタイルを設定してください。
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function DropdownItemTagsExample() {
return (
<DropdownButton id="dropdown-item-button" title="Dropdown button">
<Dropdown.ItemText>Dropdown item text</Dropdown.ItemText>
<Dropdown.Item as="button">Action</Dropdown.Item>
<Dropdown.Item as="button">Another action</Dropdown.Item>
<Dropdown.Item as="button">Something else</Dropdown.Item>
</DropdownButton>
);
}
export default DropdownItemTagsExample;
デフォルトでは、ドロップダウンメニューは左揃えですが、<Dropdown>、<DropdownButton>、または<SplitButton>にalign="end"を渡すことで切り替えることができます。
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
function MenuAlignEndExample() {
return (
<DropdownButton
align="end"
title="Dropdown end"
id="dropdown-menu-align-end"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
);
}
export default MenuAlignEndExample;
レスポンシブ配置
レスポンシブメニュー配置を使用する場合は、ブレークポイントを含むオブジェクトを<DropdownMenu>、<DropdownButton>、または<SplitButton>のalignプロパティに渡します。さまざまなブレークポイントにstartまたはendを指定できます。
レスポンシブ配置を使用すると、Popperの使用が無効になるため、flipなどの動的配置機能は機能しません。
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import SplitButton from 'react-bootstrap/SplitButton';
function MenuAlignResponsiveExample() {
return (
<>
<div>
<DropdownButton
as={ButtonGroup}
align={{ lg: 'end' }}
title="Left-aligned but right aligned when large screen"
id="dropdown-menu-align-responsive-1"
>
<Dropdown.Item eventKey="1">Action 1</Dropdown.Item>
<Dropdown.Item eventKey="2">Action 2</Dropdown.Item>
</DropdownButton>
</div>
<div className="mt-2">
<SplitButton
align={{ lg: 'start' }}
title="Right-aligned but left aligned when large screen"
id="dropdown-menu-align-responsive-2"
>
<Dropdown.Item eventKey="1">Action 1</Dropdown.Item>
<Dropdown.Item eventKey="2">Action 2</Dropdown.Item>
</SplitButton>
</div>
</>
);
}
export default MenuAlignResponsiveExample;
アクションのセクションにラベルを付けるヘッダーを追加します。
import Dropdown from 'react-bootstrap/Dropdown';
function MenuHeadersExample() {
return (
<Dropdown.Menu show>
<Dropdown.Header>Dropdown header</Dropdown.Header>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
</Dropdown.Menu>
);
}
export default MenuHeadersExample;
区切り線で関連するメニューアイテムのグループを区切ります。
import Dropdown from 'react-bootstrap/Dropdown';
function MenuDividersExample() {
return (
<Dropdown.Menu show>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
);
}
export default MenuDividersExample;
自動クローズ
デフォルトでは、メニューアイテムを選択するか、ドロップダウンメニューの外側をクリックすると、ドロップダウンメニューが閉じます。この動作は、autoCloseプロパティを使用して変更できます。
デフォルトでは、autoCloseはデフォルト値のtrueに設定されており、期待どおりに動作します。falseを選択すると、ドロップダウンメニューはドロップダウンボタンをクリックすることによってのみ切り替えることができます。insideは、メニューアイテムを選択することによってのみドロップダウンを非表示にし、outsideは、外側をクリックすることによってのみドロップダウンメニューを閉じます。
ボタンをクリックして、各シナリオでドロップダウンがどのように切り替えられるかに注意してください。
import Dropdown from 'react-bootstrap/Dropdown';
function AutoCloseExample() {
return (
<>
<Dropdown className="d-inline mx-2">
<Dropdown.Toggle id="dropdown-autoclose-true">
Default Dropdown
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown className="d-inline mx-2" autoClose="inside">
<Dropdown.Toggle id="dropdown-autoclose-inside">
Clickable Outside
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown className="d-inline mx-2" autoClose="outside">
<Dropdown.Toggle id="dropdown-autoclose-outside">
Clickable Inside
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown className="d-inline mx-2" autoClose={false}>
<Dropdown.Toggle id="dropdown-autoclose-false">
Manual Close
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
}
export default AutoCloseExample;
カスタマイズ
ドロップダウンメニューと切り替えコンポーネントのデフォルトの処理が気に入らない場合は、より基本的な<Dropdown>コンポーネントを使用して切り替えとメニューコンポーネントを明示的に指定することで、カスタマイズできます。
import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
function ButtonCustomExample() {
return (
<>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle id="dropdown-custom-1">Pow! Zoom!</Dropdown.Toggle>
<Dropdown.Menu className="super-colors">
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3" active>
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>{' '}
<Dropdown as={ButtonGroup}>
<Button variant="info">mix it up style-wise</Button>
<Dropdown.Toggle split variant="success" id="dropdown-custom-2" />
<Dropdown.Menu className="super-colors">
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3" active>
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
}
export default ButtonCustomExample;
カスタムドロップダウンコンポーネント
すべてをカスタマイズしたい場合は、付属のToggleおよびMenuコンポーネントを省略し、独自のコンポーネントを作成できます。asプロパティにカスタムコンポーネントを提供することで、各コンポーネントの動作を制御できます。カスタムの切り替えおよびメニューコンポーネントは、refを受け入れることができなければなりません。
import React, { useState } from 'react';
import Dropdown from 'react-bootstrap/Dropdown';
import Form from 'react-bootstrap/Form';
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<a
href=""
ref={ref}
onClick={(e) => {
e.preventDefault();
onClick(e);
}}
>
{children}
▼
</a>
));
const CustomMenu = React.forwardRef(
({ children, style, className, 'aria-labelledby': labeledBy }, ref) => {
const [value, setValue] = useState('');
return (
<div
ref={ref}
style={style}
className={className}
aria-labelledby={labeledBy}
>
<Form.Control
autoFocus
className="mx-3 my-2 w-auto"
placeholder="Type to filter..."
onChange={(e) => setValue(e.target.value)}
value={value}
/>
<ul className="list-unstyled">
{React.Children.toArray(children).filter(
(child) =>
!value || child.props.children.toLowerCase().startsWith(value),
)}
</ul>
</div>
);
},
);
render(
<Dropdown>
<Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
Custom toggle
</Dropdown.Toggle>
<Dropdown.Menu as={CustomMenu}>
<Dropdown.Item eventKey="1">Red</Dropdown.Item>
<Dropdown.Item eventKey="2">Blue</Dropdown.Item>
<Dropdown.Item eventKey="3" active>
Orange
</Dropdown.Item>
<Dropdown.Item eventKey="1">Red-Orange</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>,
);
API
Dropdown
DropdownToggle
DropdownItem
DropdownDivider