dicty-components-navbar

This is a responsive, themable navbar React library with Material-UI styled components.

Demo

npm run demo

Build

# builds files in the src directory to the lib directory using babel
npm run build

Desktop

Mobile

Usage

The top level Navbar component will take care of rendering all of the sub-components. If you'd like to include a brand, pass it an object like this:

const brand = {
  title: "Hello",
  href: "http://www.google.com",
}

Setting the nav items is similar, but comes with a few more options:

const items = [
  {
    // Format for a dropdown
    dropdown: true,
    title: "Drop",
    items: [
      {
        name: "Dropdown 1",
        href: "http://www.google.com",
      },
    ],
  },
  {
    // For a normal nav link
    title: "Link 1",
    href: "http://www.google.com",
  },
  {
    // Or any element you want!
    // Custom elements will be flex children of navbar, laid out in a row for desktop and a column for mobile
    element: <div className="custom">custom</div>,
  },
]

Components

Brand

A large link displayed at the far left of the desktop view and the top left of the mobile view.

Props

Property	Type	Purpose
title	string	The text to be displayed in the brand.
href	string	The url for the brand to link to.

Dropdown

An animated, collapsible dropdown menu.

Props

Property	Type	Purpose
open	boolean	Determines whether the dropdown is open or closed.
changeDropdown	function	Function responsible for changing the active dropdown.
theme	object	An of the component's themable properties (provided if you are also using the Navbar).
title	string	The text to be displayed on the dropdown menu's toggle button.
index	number	Used by the Navbar to track which dropdown is open.
items	Array	An array of objects of the form {name: string, href: string} with name as the link text and href as the url.

Link

A link in the Navbar.

Props

Property	Type	Purpose
title	string	The text to be displayed in the link.
href	string	The url for the link to link to.

MenuIcon

A menu icon that consists of three horizontal bars. Tansforms into an 'X' when the open prop is true. Used to toggle the Navbar dropdown in the mobile view.

Props

Property	Type	Purpose
open	boolean	Determines whether the icon is three horizontal bars (closed) or an 'X' (open).
onClick	function	Function to be invoked when the icon is clicked.

Navbar

A top level component for rendering Links and controlling Dropdowns. Can be toggled open or closed by the MenuIcon in the mobile view. Note: This component adds an event listener to the document object to detect clicks outside of its boundingClientRect in the mobile view.

Props

Property	Type	Purpose
brand	object	An object of the form {title: string, href: string}. Maps to the props of the Brand component.
items	array	An array of objects which determines the nav items. See the usage example for options.

Theming

These components expose a few themable properties, listed below. If you are using the top-level Navbar component, you need only provide it with the theme prop. If you are using individual components, each of them will need their own theme prop.

Property	Type	Purpose
primary	string	An RGB, hex, or CSS color string that will be the background color for the Navbar.
secondary	string	An RGB, hex, or CSS color string that will be the background color for hovered links, active Dropdown's, Dropdown borders, and the text color for non-hovered Dropdown links.
text	string	An RGB, hex, or CSS color string that will be the primary text color for the Navbar.

Utility Functions

wasClicked(e: MouseEvent, element: HTMLElement, Ref, or similar) : boolean

This function, given a MouseEvent and an element that supports the getBoundingClientRect method will return true if the mouse event occurred inside of the element's client area and false if it did not.

Development

• Clone the develop branch of this repository
• Run npm install
• Create a new branch (i.e. feature/foo-plugin)
• Complete any necessary work.
• If creating a new plugin, there is a guide that walks you through the process using the bold plugin as a guide.
• Commit all changes and open a pull request. If all checks pass, it is ready to merge to develop.

If you are ready to cut a new release, you can then merge into master. This will trigger a GitHub Action that uses semantic-release to create a new tag automatically.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Siddhartha Basu 🐛 💻 🖋 📖 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!

Misc badges