This is a responsive, themable navbar React library with Material-UI styled components.
npm run demo
# builds files in the src directory to the lib directory using babel
npm run build
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>,
},
]
A large link displayed at the far left of the desktop view and the top left of the mobile view.
Property | Type | Purpose |
---|---|---|
title | string | The text to be displayed in the brand. |
href | string | The url for the brand to link to. |
An animated, collapsible dropdown menu.
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. |
A link in the Navbar.
Property | Type | Purpose |
---|---|---|
title | string | The text to be displayed in the link. |
href | string | The url for the link to link to. |
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.
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. |
A top level component for rendering Link
s and controlling Dropdown
s. 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.
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. |
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 . |
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.
develop
branch of this repositorynpm install
feature/foo-plugin
)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.
Thanks goes to these wonderful people (emoji key):
Siddhartha Basu 🐛 💻 🖋 📖 🚧 |
This project follows the all-contributors specification. Contributions of any kind welcome!