---
name: 3.8 - Navbar
route: /components/navbar
order: 75
menu: 3. Components
---

# Navbar

import { Playground, PropsTable } from 'docz'
import { Button, Navbar, Container, NavbarInner, NavbarItem, NavbarLink, NavbarBrand } from '../'
import logo from '../../assets/images/logo-symbol.png'

## Properties

<PropsTable of={Navbar} />

## Basic usage

<Playground>
  <Navbar theme="light">
    <NavbarInner>
      <NavbarBrand>
        <img src={logo} alt="Pointr Logo" />
      </NavbarBrand>
      <NavbarItem>
        <NavbarLink to="/get-inspired">Get inspired</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/talent">Talent</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/companies">Companies</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/sign-in" active>About us</NavbarLink>
      </NavbarItem>
    </NavbarInner>
    <NavbarInner>
      <NavbarItem>
        <NavbarLink to="/sign-in">Sign in</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <Button>Register</Button>
      </NavbarItem>
    </NavbarInner>
  </Navbar>
</Playground>

## Customizing colors
As the Button component, you have 6 different themes to customize: `primary`, `success`, `warning`, `danger`, `info`, `light`

<Playground>
  <Navbar theme="primary">
    <NavbarInner>
      <NavbarBrand>
        <img src={logo} alt="Pointr Logo" />
      </NavbarBrand>
      <NavbarItem>
        <NavbarLink to="/get-inspired">Get inspired</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/talent">Talent</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/companies">Companies</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/sign-in" active>About us</NavbarLink>
      </NavbarItem>
    </NavbarInner>
    <NavbarInner>
      <NavbarItem>
        <NavbarLink to="/sign-in">Sign in</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <Button theme="light">Register</Button>
      </NavbarItem>
    </NavbarInner>
  </Navbar>
  <Navbar theme="success">
    <NavbarInner>
      <NavbarBrand>
        <img src={logo} alt="Pointr Logo" />
      </NavbarBrand>
      <NavbarItem>
        <NavbarLink to="/get-inspired">Get inspired</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/talent">Talent</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/companies">Companies</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/sign-in" active>About us</NavbarLink>
      </NavbarItem>
    </NavbarInner>
    <NavbarInner>
      <NavbarItem>
        <NavbarLink to="/sign-in">Sign in</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <Button theme="light">Register</Button>
      </NavbarItem>
    </NavbarInner>
  </Navbar>
  <Navbar theme="warning">
    <NavbarInner>
      <NavbarBrand>
        <img src={logo} alt="Pointr Logo" />
      </NavbarBrand>
      <NavbarItem>
        <NavbarLink to="/get-inspired">Get inspired</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/talent">Talent</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/companies">Companies</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/sign-in" active>About us</NavbarLink>
      </NavbarItem>
    </NavbarInner>
    <NavbarInner>
      <NavbarItem>
        <NavbarLink to="/sign-in">Sign in</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <Button theme="light">Register</Button>
      </NavbarItem>
    </NavbarInner>
  </Navbar>
  <Navbar theme="danger">
    <NavbarInner>
      <NavbarBrand>
        <img src={logo} alt="Pointr Logo" />
      </NavbarBrand>
      <NavbarItem>
        <NavbarLink to="/get-inspired">Get inspired</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/talent">Talent</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/companies">Companies</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/sign-in" active>About us</NavbarLink>
      </NavbarItem>
    </NavbarInner>
    <NavbarInner>
      <NavbarItem>
        <NavbarLink to="/sign-in">Sign in</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <Button theme="light">Register</Button>
      </NavbarItem>
    </NavbarInner>
  </Navbar>
  <Navbar theme="info">
    <NavbarInner>
      <NavbarBrand>
        <img src={logo} alt="Pointr Logo" />
      </NavbarBrand>
      <NavbarItem>
        <NavbarLink to="/get-inspired">Get inspired</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/talent">Talent</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/companies">Companies</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink to="/sign-in" active>About us</NavbarLink>
      </NavbarItem>
    </NavbarInner>
    <NavbarInner>
      <NavbarItem>
        <NavbarLink to="/sign-in">Sign in</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <Button theme="light">Register</Button>
      </NavbarItem>
    </NavbarInner>
  </Navbar>
</Playground>

