Nav

React Nav component allows to create simple navigation. Learn how to use React Nav to quickly and easily create elegant and flexible navs.

Usage

Example

Script


  return (
    <CNav variant="pills">
      <CNavItem>
        <CNavLink active>Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink>Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink>Link</CNavLink>
      </CNavItem>
      <CNavItem>
        <CNavLink disabled>Disabled</CNavLink>
      </CNavItem>
    </CNav>
  )

# Features

Easily customizable
Compatible with CDropdown component

# Nav API

Name	Type	Default Value
tag	any	ul
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
variant	(tabs \| pills)
additional variant of the nav, available variants: 'tabs', 'pills'
vertical	(boolean \| string)
display nav vertically
justified	boolean
set nav items to be justified
fill	boolean
set nav items to take full available width
inCard	boolean
sets card header styles

NavItem

# NavItem API

Name	Type	Default Value
tag	any	li
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag

NavLink

# NavLink API

Name	Required	Type	Default Value
className		string
user classes for the main HTML tag
innerRef		(Function \| string \| object)
ref to the main tag
onClick		Function
on click callback function

Context

CTabs