A responsive react navbar component

Usage no npm install needed!

<script type="module">
  import actoReactNavbar from 'https://cdn.skypack.dev/@acto/react-navbar';


React Navbar

A responsive react navbar component

NPM JavaScript Style Guide

This is a simple, extensible Navbar component for React. I built this because I realised that I kept creating navbars from scratch on every project.

It is responsive and the navbar items collapse into a hamburger menu on mobile.


npm install --save @ovieokeh/react-navbar

Available Props

You can customise the look and content of the navbar by passing in the following props:

Navbar Props

name type default value isRequired
className string false
menuClassName string false
brand JSX.Element true
leftLinks JSX.Element false
rightLinks JSX.Element false
theme ThemeProps false
shouldHideOnScroll boolean true false
shouldAnimate boolean true false

If you pass in a className prop, you can style this class in your custom css to customize the look and feel of the navbar even more.


prop type default value
mainColor string "#333333"
backgroundColor string "#ffffff"
menuBgColor string "#ffffff"
height string "55px"
sliderWidth string "100%"


Play with a

import * as React from 'react'
import Navbar from '@ovie/react-navbar'

const navTheme = {
  mainColor: '#52b788',
  menuBgColor: '#edf7f3'

const navBrand = <a href={ROUTES.HOME}>Base Corp.</a>

const leftLinks = (
    <a href={ROUTES.PLANS}>Our Plans</a>
    <a href={ROUTES.FAQ}>How It Works</a>
    <a href={ROUTES.MENU}>Our Menus</a>

const rightLinks = (
    <a href={ROUTES.SIGNUP}>Get Started</a>
    <a href={ROUTES.SIGNIN}>Sign In</a>

const Example = () => {
  return (
    <div className="app">
        className="navbar" // style .navbar in your css
        menuClassName="navbar--menu" // style .navbar--menu in your css



Apache-2.0 © Ovie Okeh