Bootstrap に含まれるナビゲーションコンポーネントの使用方法に関するドキュメントと例です。
基本ナビ
Bootstrap のナビゲーション要素はすべて、一般的な Nav コンポーネントとスタイルを共有しています。variant を切り替えて、各スタイルを切り替えます。基本的な Nav コンポーネントは flexbox で構築されており、あらゆる種類のナビゲーションコンポーネントを構築するための強力な基盤を提供します。
基本の、variant を持たない Nav コンポーネントには、active prop スタイルは含まれていません！
import Nav from 'react-bootstrap/Nav';
function BasicExample() {
return (
<Nav
activeKey="/home"
onSelect={(selectedKey) => alert(`selected ${selectedKey}`)}
>
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
);
}
export default BasicExample;
<Nav> マークアップは非常に柔軟で、スタイリングはクラスによって制御されるため、ナビを構築するために好きな要素を使用できます。デフォルトでは、<Nav> と <Nav.Item> は両方とも、<ul> や <li> 要素ではなく、<div> をレンダリングします。これは、<Nav.Item> を省略して <Nav.Link> を直接レンダリングすることが可能（かつ一般的）であるため、デフォルトで無効なマークアップ（ul > a）が作成されるためです。
<ul> が適切な場合は、as prop を介してレンダリングできます。アイテムも <li> に設定してください！
import Nav from 'react-bootstrap/Nav';
function ListExample() {
return (
<Nav defaultActiveKey="/home" as="ul">
<Nav.Item as="li">
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item as="li">
<Nav.Link eventKey="link-1">Link</Nav.Link>
</Nav.Item>
<Nav.Item as="li">
<Nav.Link eventKey="link-2">Link</Nav.Link>
</Nav.Item>
</Nav>
);
}
export default ListExample;
利用可能なスタイル
flexbox ユーティリティクラスを使用することで、Nav の方向と向きを制御できます。デフォルトでは、ナビは左揃えですが、中央揃えまたは右揃えに簡単に変更できます。
import Nav from 'react-bootstrap/Nav';
function AlignmentExample() {
return (
<>
<Nav className="justify-content-center" activeKey="/home">
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
<p className="text-center mt-4 mb-4">Or right-aligned</p>
<Nav className="justify-content-end" activeKey="/home">
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
</>
);
}
export default AlignmentExample;
.flex-column クラスまたは独自の CSS で flex アイテムの方向を変更して、積み重ねられたナビを作成します。レスポンシブバージョンを使用して、一部のビューポートではスタックし、他のビューポートではスタックしないようにすることもできます（例：.flex-sm-column）。
import Nav from 'react-bootstrap/Nav';
function StackedExample() {
return (
<Nav defaultActiveKey="/home" className="flex-column">
<Nav.Link href="/home">Active</Nav.Link>
<Nav.Link eventKey="link-1">Link</Nav.Link>
<Nav.Link eventKey="link-2">Link</Nav.Link>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav>
);
}
export default StackedExample;
ナビアイテムを「タブ」として視覚的に表現します。このスタイルは、Tab コンポーネントで作成されたタブ表示領域とうまく調和します。
注：タブスタイリングを使用した垂直ナビ（.flex-column）の作成は、Bootstrap のデフォルトのスタイルシートではサポートされていません。
import Nav from 'react-bootstrap/Nav';
function TabsExample() {
return (
<Nav variant="tabs" defaultActiveKey="/home">
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Option 2</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
);
}
export default TabsExample;
import Nav from 'react-bootstrap/Nav';
function PillsExample() {
return (
<Nav variant="pills" defaultActiveKey="/home">
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Option 2</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
);
}
export default PillsExample;
import Nav from 'react-bootstrap/Nav';
function UnderlineExample() {
return (
<Nav variant="underline" defaultActiveKey="/home">
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Option 2</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
);
}
export default UnderlineExample;
塗りつぶしと均等配置
ナビのコンテンツを、利用可能な幅全体に拡張するように強制します。スペースを比例的に埋めるには、fill を使用します。ナビは幅全体ですが、各ナビアイテムのサイズが異なることに注意してください。
import Nav from 'react-bootstrap/Nav';
function FillExample() {
return (
<Nav fill variant="tabs" defaultActiveKey="/home">
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Loooonger NavLink</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
);
}
export default FillExample;
各 NavItem を同じサイズにする場合は、justify を使用します。
import Nav from 'react-bootstrap/Nav';
function JustifiedExample() {
return (
<Nav justify variant="tabs" defaultActiveKey="/home">
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Loooonger NavLink</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
);
}
export default JustifiedExample;
ドロップダウンの使用
Dropdown コンポーネントを NavLink および NavItem コンポーネントと組み合わせて、Nav コンポーネントで適切に機能するドロップダウンを作成できます。
import Dropdown from 'react-bootstrap/Dropdown';
import NavItem from 'react-bootstrap/NavItem';
import NavLink from 'react-bootstrap/NavLink';
function DropdownImplExample() {
return (
<Dropdown as={NavItem}>
<Dropdown.Toggle as={NavLink}>Click to see more…</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>Hello there!</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
export default DropdownImplExample;
上記は、コンポーネントモデルがいかに柔軟であるかを示しています。ただし、独自のバージョンをロールしたくない場合は、ほとんどの場合に機能するシンプルな <NavDropdown> を含めています。
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
function NavDropdownExample() {
const handleSelect = (eventKey) => alert(`selected ${eventKey}`);
return (
<Nav variant="pills" activeKey="1" onSelect={handleSelect}>
<Nav.Item>
<Nav.Link eventKey="1" href="#/home">
NavLink 1 content
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="2" title="Item">
NavLink 2 content
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="3" disabled>
NavLink 3 content
</Nav.Link>
</Nav.Item>
<NavDropdown title="Dropdown" id="nav-dropdown">
<NavDropdown.Item eventKey="4.1">Action</NavDropdown.Item>
<NavDropdown.Item eventKey="4.2">Another action</NavDropdown.Item>
<NavDropdown.Item eventKey="4.3">Something else here</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item eventKey="4.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
);
}
export default NavDropdownExample;
API
Nav
NavItem
NavLink
NavDropdown