Pills

A button-like navigation component.

React Bootstrap docs

Basic example

import Nav from 'react-bootstrap/Nav'

{/* Nav pills */}
<Nav variant='pills' defaultActiveKey='link-1'>
  <Nav.Item>
    <Nav.Link eventKey='link-1'>Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='link-2'>Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='link-3'>Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='disabled' disabled>
      Disabled
    </Nav.Link>
  </Nav.Item>
</Nav>

Fill and justify

import Nav from 'react-bootstrap/Nav'

{/* Nav pills: Fill */}
<Nav fill variant='pills' defaultActiveKey='link-1'>
  <Nav.Item>
    <Nav.Link eventKey='link-1'>Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='link-2'>Much longer nav link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='link-3'>Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='disabled' disabled>
      Disabled
    </Nav.Link>
  </Nav.Item>
</Nav>

{/* Nav pills: Justify */}
<Nav justify variant='pills' defaultActiveKey='link-1'>
  <Nav.Item>
    <Nav.Link eventKey='link-1'>Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='link-2'>Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='link-3'>Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='disabled' disabled>
      Disabled
    </Nav.Link>
  </Nav.Item>
</Nav>

Pills with dropdowns

import Nav from 'react-bootstrap/Nav'
import Dropdown from 'react-bootstrap/Dropdown'

{/* Pills with dropdown example. You can also use <NavDropdown> shortcut instead. */}
<Nav variant='pills' activeKey='link-1'>
  <Nav.Item>
    <Nav.Link eventKey='link-1'>
      Active
    </Nav.Link>
  </Nav.Item>
  <Nav.Item as={Dropdown}>
    <Dropdown.Toggle as={Nav.Link}>Dropdown</Dropdown.Toggle>
    <Dropdown.Menu className='my-1'>
      <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>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='link-3'>
      Link
    </Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='disabled' disabled>
      Disabled
    </Nav.Link>
  </Nav.Item>
</Nav>

Vertical pills

import Nav from 'react-bootstrap/Nav'

{/* Vertical pills */}
<Nav variant='pills' defaultActiveKey='link-1' className='flex-column'>
  <Nav.Item>
    <Nav.Link eventKey='link-1'>Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='link-2'>Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='link-3'>Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='disabled' disabled>
      Disabled
    </Nav.Link>
  </Nav.Item>
</Nav>

Light pills

import Nav from 'react-bootstrap/Nav'

{/* Nav pills light skin */}
<Nav variant='pills nav-pills-light' defaultActiveKey='link-1'>
  <Nav.Item>
    <Nav.Link eventKey='link-1'>Active</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='link-2'>Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='link-3'>Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey='disabled' disabled>
      Disabled
    </Nav.Link>
  </Nav.Item>
</Nav>

Tabs-like behavior

Home
Profile
Messages

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud consectetur culpa veniam sint.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

import Nav from 'react-bootstrap/Nav'
import Tab from 'react-bootstrap/Tab'
import Fade from 'react-bootstrap/Fade'
          
<Tab.Container defaultActiveKey='home' transition={Fade}>

  {/* Nav pills */}
  <Nav variant='pills' className='mb-3'>
    <Nav.Item>
      <Nav.Link eventKey='home'>
        <i className='fi-home me-2'></i>
        Home
      </Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey='profile'>
        <i className='fi-user me-2'></i>
        Profile
      </Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey='messages'>
        <i className='fi-chat-left me-2'></i>
        Messages
      </Nav.Link>
    </Nav.Item>
  </Nav>

  {/* Tab content */}
  <Tab.Content>
    <Tab.Pane eventKey='home'>
      <p className='mb-0'>Consequat occaecat ullamco amet non eiusmod nostrud dolore...</p>
    </Tab.Pane>
    <Tab.Pane eventKey='profile'>
      <p className='mb-0'>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa...</p>
    </Tab.Pane>
    <Tab.Pane eventKey='messages'>
      <p className='mb-0'>Est quis nulla laborum officia ad nisi ex nostrud aliquip...</p>
    </Tab.Pane>
  </Tab.Content>
</Tab.Container>