导航和标签

Bootstrap 包含的导航组件的使用文档和示例。

基本导航

Bootstrap 中的导航元素都共享一个通用的 Nav 组件和样式。切换 variant 以在不同样式之间切换。基本 Nav 组件使用 flexbox 构建，为构建各种类型的导航组件提供了坚实的基础。

注意

基本的、无变体的 Nav 组件不包含任何 active 属性样式！

结果

正在加载...

实时编辑器

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;

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> 都渲染 <div>，而不是 <ul> 和 <li> 元素。这是因为可以（并且很常见）省略 <Nav.Item> 并直接渲染 <Nav.Link>，这将默认情况下创建无效的标记（ul > a）。

当 <ul> 适用时，您可以通过 as 属性渲染一个；请确保也将您的项目设置为 <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;

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;

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;

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;

选项卡

以视觉方式将导航项表示为“选项卡”。此样式与我们 选项卡组件 创建的可选项卡区域很好地搭配。

注意：使用选项卡样式创建垂直导航（.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 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 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;

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;

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;

如果您希望每个导航项都具有相同的大小，请使用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;

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;

使用下拉菜单

您可以将下拉菜单组件与 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;

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;

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