Nav links

Horizontally or vertically stacked list links that provide a foundation for building all types of navigation components.

Basic example

Active
Link
Next.js link

'use client'

import Link from 'next/link'
import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'

export default function NavLinksBasicDemo() {
  return (
    <Nav as="ul" defaultActiveKey="link-1" onSelect={(eventKey) => alert(`Selected ${eventKey}`)}>
      <NavItem as="li">
        <NavLink eventKey="link-1" href="#link-1">
          Active
        </NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink eventKey="link-2" href="#link-2">
          Link
        </NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink as={Link} eventKey="next-link" href="#next-link">
          Next.js link
        </NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink as="button" eventKey="button">
          Button
        </NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink as="button" eventKey="disabled" disabled>
          Disabled
        </NavLink>
      </NavItem>
    </Nav>
  )
}

Underline effect

import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'

export default function NavLinksUnderlineDemo() {
  return (
    <Navbar className="p-0">
      <Nav as="ul" className="flex-wrap" defaultActiveKey="#link-1">
        <NavItem as="li">
          <NavLink href="#link-1" className="fs-sm">
            Active
          </NavLink>
        </NavItem>
        <NavItem as="li">
          <NavLink href="#link-2" className="fs-sm">
            Link
          </NavLink>
        </NavItem>
        <NavItem as="li">
          <NavLink href="#link-3" className="fs-sm">
            Link
          </NavLink>
        </NavItem>
        <NavItem as="li">
          <NavLink href="#link-4" className="fs-sm" disabled>
            Disabled
          </NavLink>
        </NavItem>
      </Nav>
    </Navbar>
  )
}

Vertical alignment

Active
Link
Link
Disabled

import Stack from 'react-bootstrap/Stack'
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'

export default function NavLinksVerticalDemo() {
  return (
    <Stack direction="horizontal" gap={5}>
      <Nav as="ul" className="flex-column" defaultActiveKey="#link-1">
        <NavItem as="li">
          <NavLink href="#link-1">Active</NavLink>
        </NavItem>
        <NavItem as="li">
          <NavLink href="#link-2">Link</NavLink>
        </NavItem>
        <NavItem as="li">
          <NavLink href="#link-3">Link</NavLink>
        </NavItem>
        <NavItem as="li">
          <NavLink href="#link-4" disabled>
            Disabled
          </NavLink>
        </NavItem>
      </Nav>

      {/* Vertically aligned underline nav links (inside navbar) */}
      <Navbar expand={false} className="p-0">
        <Nav as="ul" defaultActiveKey="#link-1">
          <NavItem as="li">
            <NavLink href="#link-1" className="fs-sm">
              Active
            </NavLink>
          </NavItem>
          <NavItem as="li">
            <NavLink href="#link-2" className="fs-sm">
              Link
            </NavLink>
          </NavItem>
          <NavItem as="li">
            <NavLink href="#link-3" className="fs-sm">
              Link
            </NavLink>
          </NavItem>
          <NavItem as="li">
            <NavLink href="#link-4" className="fs-sm" disabled>
              Disabled
            </NavLink>
          </NavItem>
        </Nav>
      </Navbar>
    </Stack>
  )
}

With icons and dropdowns

import Stack from 'react-bootstrap/Stack'
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'

export default function NavLinksIconsDropdownsDemo() {
  return (
    <Stack gap={3}>
      <Nav as="ul" defaultActiveKey="#home">
        <NavItem as="li">
          <NavLink href="#home">
            <i className="ci-home opacity-75 me-2"/>
            Home
          </NavLink>
        </NavItem>
        <NavItem as="li">
          <NavLink href="#profile">
            <i className="ci-user opacity-75 me-2"/>
            Profile
          </NavLink>
        </NavItem>
        <Dropdown as="li" className="nav-item">
          <DropdownToggle as={NavLink}>Dropdown</DropdownToggle>
          <DropdownMenu as="ul">
            <li>
              <DropdownItem href="#dropdown-link-1">Action</DropdownItem>
            </li>
            <li>
              <DropdownItem href="#dropdown-link-2">Another action</DropdownItem>
            </li>
            <li>
              <DropdownItem href="#dropdown-link-3">Something else here</DropdownItem>
            </li>
          </DropdownMenu>
        </Dropdown>
      </Nav>

      {/* Underline nav links (inside navbar) example with icons and dropdown */}
      <Navbar className="p-0">
        <Nav as="ul" defaultActiveKey="#home">
          <NavItem as="li">
            <NavLink href="#home" className="fs-sm">
              <i className="ci-home opacity-75 me-2"/>
              Home
            </NavLink>
          </NavItem>
          <NavItem as="li">
            <NavLink href="#profile" className="fs-sm">
              <i className="ci-user opacity-75 me-2"/>
              Profile
            </NavLink>
          </NavItem>
          <Dropdown as="li" className="nav-item">
            <DropdownToggle as={NavLink} className="fs-sm">
              Dropdown
            </DropdownToggle>
            <DropdownMenu as="ul">
              <li>
                <DropdownItem href="#dropdown-link-1">Action</DropdownItem>
              </li>
              <li>
                <DropdownItem href="#dropdown-link-2">Another action</DropdownItem>
              </li>
              <li>
                <DropdownItem href="#dropdown-link-3">Something else here</DropdownItem>
              </li>
            </DropdownMenu>
          </Dropdown>
        </Nav>
      </Navbar>
    </Stack>
  )
}

Sizing

Active
Link
Link
Disabled

Active
Link
Link
Disabled

Active
Link
Link
Disabled

Active
Link
Link
Disabled

import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'
import Stack from 'react-bootstrap/Stack'

export default function NavLinksSizingDemo() {
  return (
    <Stack gap={2}>
      {['xl', 'lg', 'base', null].map((size, index) => (
        <Nav key={index} as="ul" defaultActiveKey="link-1">
          <NavItem as="li">
            <NavLink href="#link-1" className={size !== null ? `fs-${size}` : ''}>
              Active
            </NavLink>
          </NavItem>
          <NavItem as="li">
            <NavLink href="#link-2" className={size !== null ? `fs-${size}` : ''}>
              Link
            </NavLink>
          </NavItem>
          <NavItem as="li">
            <NavLink href="#link-3" className={size !== null ? `fs-${size}` : ''}>
              Link
            </NavLink>
          </NavItem>
          <NavItem as="li">
            <NavLink href="#link-4" className={size !== null ? `fs-${size}` : ''} disabled>
              Disabled
            </NavLink>
          </NavItem>
        </Nav>
      ))}
    </Stack>
  )
}