stephanieinez / React Responsive Navbar
Nothing crazy, nothing flashy, just a simple, flexible & completely customisable responsive navigation bar component.
Stars: ✭ 42
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Responsive Navbar
priority-plus
A modern implementation of the priority plus navigation pattern.
Stars: ✭ 30 (-28.57%)
Mutual labels: navigation, responsive, menu
Sidr
Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.
Stars: ✭ 2,924 (+6861.9%)
Mutual labels: navigation, menu, responsive
ml-stack-nav
Customizable, responsive, accessible, easy-to-use multi-level stack navigation menu with slide effect.
Stars: ✭ 20 (-52.38%)
Mutual labels: navigation, responsive, menu
Quickmenu
The new era of mobile navigation for the web, we're out of hamburgers.
Stars: ✭ 119 (+183.33%)
Mutual labels: navigation, menu, responsive
Transformerslayout
🔥 App金刚区导航菜单,类似淘宝、QQ音乐等APP导航,方格布局横向多行滑动翻页带滚动条
Stars: ✭ 258 (+514.29%)
Mutual labels: navigation, menu
simple-sidenav
Simple, easily customizable, animated menu.
Stars: ✭ 40 (-4.76%)
Mutual labels: navigation, menu
Jquery Menuflip
Create animated flipping menu links with this extremely lightweight jQuery plugin.
Stars: ✭ 39 (-7.14%)
Mutual labels: navigation, menu
Django Sitetree
Reusable application for Django introducing site tree, menu and breadcrumbs navigation elements.
Stars: ✭ 330 (+685.71%)
Mutual labels: navigation, menu
bsnav
An extended Bootstrap 4 menu with a bunch of utilities
Stars: ✭ 90 (+114.29%)
Mutual labels: navigation, menu
Menuspy
A JavaScript library to make navigation menus highlight the item based on currently in view section.
Stars: ✭ 283 (+573.81%)
Mutual labels: navigation, menu
Material Bottom Nav
A bottom navigation bar adhering to the Material Design specification.
Stars: ✭ 41 (-2.38%)
Mutual labels: navigation, menu
Slinky
A light-weight, responsive, mobile-like navigation menu plugin
Stars: ✭ 649 (+1445.24%)
Mutual labels: navigation, menu
Luxbar
🍸 Featherweight, Responsive, CSS Only Navigation Bar
Stars: ✭ 663 (+1478.57%)
Mutual labels: navigation, menu
React Horizontal Scrolling Menu
Horizontal scrolling menu component for React.
Stars: ✭ 289 (+588.1%)
Mutual labels: navigation, menu
Menu
Menu and sidebar management package for Laravel
Stars: ✭ 6 (-85.71%)
Mutual labels: navigation, menu
navigator
🧿 Build navigation or menu for Laravel and Awes.io. Unlimited complexity and depth, with permissions and sorting support.
Stars: ✭ 47 (+11.9%)
Mutual labels: navigation, menu
Accordion
Silky-smooth accordion widgets with no external dependencies.
Stars: ✭ 32 (-23.81%)
Mutual labels: navigation, menu
Hamburger React
Animated hamburger menu icons for React (1.5 KB) 🍔
Stars: ✭ 391 (+830.95%)
Mutual labels: navigation, menu
react-responsive-navbar
Nothing crazy, nothing flashy, just a simple, flexible & completely customisable responsive navigation bar component. Check out this demo.
Install
npm install --save react-responsive-navbar
Usage
import React, { Component } from 'react';
import ResponsiveMenu from 'react-responsive-navbar';
class Example extends Component {
render() {
return (
<ResponsiveMenu
menuOpenButton={<div />}
menuCloseButton={<div />}
changeMenuOn="500px"
largeMenuClassName="large-menu-classname"
smallMenuClassName="small-menu-classname"
menu={
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
}
/>
);
}
}
Props
-
menuOpenButton & menuCloseButton: the icons for small screens. I use
react-icons
in the example however you are free to use anydiv
that you please. -
changeMenuOn: specify the page width as a string in
px
that you would like to switch between the small and large menu. -
menu: takes in any
div
to create your menu content. - You can also specify individual stylings for each of the large or small menus
by adding a
className
to largeMenuClassName or smallMenuClassName
name | type | required |
---|---|---|
menuOpenButton | react component | yes |
menuCloseButton | react component | yes |
changeMenuOn | string | yes |
menu | react component | yes |
largeMenuClassName | string | no |
smallMenuClassName | string | no |
License
MIT © Stephanie Tassone
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].