/navvy

A React navbar component.

Primary LanguageJavaScriptMIT LicenseMIT

Navvy logo

Navvy

NPM Version NPM Total Downloads npm bundle size (minified + gzip) Coverage Status Build Status

A React Navbar/Sidebar combo component.

📝 Table of Contents

🧐 About

Navvy serves as a simple to use navbar/sidebar combo component. A fully featured navbar/sidebar is a common aspect of many dashboards and other websites; Navvy makes it easy to implement one on your own.

📦 Installing

NPM

npm install navvy

Yarn

yarn add navvy

🎈 Usage 

import React from 'react'
import Navvy from 'navvy'

const App = () => {
  return (
    <Navvy
      logo="D A S H B O A R D"
      sections={[
        {
          heading: 'Navigation',
          links: [
            {
              collapsible: true,
              children: [
                {
                  icon: 'Cube',
                  title: 'Child 1'
                },
                {
                  icon: 'Cubes',
                  title: 'Child 2'
                }
              ],
              icon: 'Dashboard',
              title: 'Dashboard'
            },
            {
              icon: 'Template',
              title: 'Page layouts',
              handler: () => console.log('LOL')
            },
            { icon: 'Sidebar', title: 'Navigation' },
            { icon: 'Apps', title: 'Widget' }
          ]
        },
        {
          heading: 'UI Element',
          links: [
            { icon: 'Add', title: 'Basic' },
            { icon: 'Action', title: 'Advanced' },
            { icon: 'Ad', title: 'Extra' },
            { icon: 'ThreeD', title: 'Animations' },
            { icon: 'Cubes', title: 'Icons' }
          ]
        },
        {
          heading: 'Forms',
          links: [
            { icon: 'Document', title: 'Form' },
            { icon: 'FormAdd', title: 'Form Picker' },
            { icon: 'FormCheckmark', title: 'Form Select' },
            { icon: 'FormFolder', title: 'Form Masking' },
            { icon: 'Magic', title: 'Form Wizard' }
          ]
        }
      ]}
    >
      {Inner Content}
    </Navvy>
  )
}

export default App

⛏️ Built Using

✏️ TODO

  • Basic Skeleton.
  • Ability to collapse/expand sidebar.
  • Ability to make fullscreen.
  • Ability to render collapsible links.
  • Ability to render custom Logos.
  • Dark/Light Modes.
  • Ability to hook into Notifications.
  • Ability to hook into Settings.

✍️ Author

🎉 Acknowledgements