Navbar

Documentation and examples for React's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

Usage

Example

Script


  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <CNavbar expandable="sm" color="info" >
        <CToggler inNavbar onClick={() => setIsOpen(!isOpen)}/>
        <CNavbarBrand>
          NavbarBrand
        </CNavbarBrand>
        <CCollapse show={isOpen} navbar>
          <CNavbarNav>
            <CNavLink>Home</CNavLink>
            <CNavLink>Link</CNavLink>
          </CNavbarNav>
          <CNavbarNav className="ml-auto">
            <CForm inline>
              <CInput
                className="mr-sm-2"
                placeholder="Search"
                size="sm"
              />
              <CButton color="light" className="my-2 my-sm-0" type="submit">Search</CButton>
            </CForm>
            <CDropdown
              inNav
            >
              <CDropdownToggle color="primary">
                Lang
              </CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem>EN</CDropdownItem>
                <CDropdownItem>ES</CDropdownItem>
                <CDropdownItem>RU</CDropdownItem>
                <CDropdownItem>FA</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
            <CDropdown
              inNav
            >
              <CDropdownToggle color="primary">
                User
              </CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem>Account</CDropdownItem>
                <CDropdownItem>Settings</CDropdownItem>
              </CDropdownMenu>
            </CDropdown>
          </CNavbarNav>
        </CCollapse>
      </CNavbar>
    </div>
  )

# Navbar API

Name	Type	Default Value
tag	any	nav
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
light	boolean
switches text color to black
color	string
background color of the component
fixed	(top \| bottom)
fixes navbar on top or bottom of the body, available values: 'top', 'bottom'
sticky	boolean
makes navbar sticky to top of the body
expandable	(boolean \| string)
determines on what width navbar collapses, available values: false, true, 'sm', 'md', 'lg', 'xl'

NavbarNav

# NavbarNav 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

NavbarText

# NavbarText API

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

NavbarBrand

Render CBrand with navbar class.