Navbar
Tired to implement a Navbar that is 100% responsive for every new project ? Navbar solves this problem. It is built on top of Material-UI's AppBar and provides you with a set of inner components to help you build the Navbar of your choice.
It handles its responsive design for any screen for you, and provides a Navbar already styled that will fit to most of the use-cases. You
can still customize it the way you want by leveraging the theme or extending its inner components!
If you play around with your browser’s window size, you will see that the menu automatically switches from mobile to desktop mode and vice versa.
No config or prop needed on your side! This Navbar does it for you :)
By default, it switches to desktop mode once the theme.breakpoints.md (default: 960px) is reached.
You can of course override it when you bring your own theme in the StyledProvider provider at the root of your app.
Visit the customization page to know more about the breakpoints.
Note: the components such as the icons
<BrandIcon>and<AmericaFlag>used in the following stories are not included. You can bring any component of your choice!
Default
Note: here the language menu was before the menu options, but you can of course change that the way you want it to be :)
No Language
Sticky
No brand icon
Extended
This component was extended using styled() from styled-components.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | The content of the Navbar. You can use the components provided by the Navbar, or bring your owns. |
The ref will be forwarded to the html root element, as well as any other props.
Navbar.Brand
Default Brand
No icon
Custom url
Extended
This component was extended using styled() from styled-components.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | Any jsx node you want to render inside the Brand. | |
| href | string | '/' | The navbar's brand link. By default it links to the root page. |
| title | string | The navbar's title. |
The ref will be forwarded to the html root element, as well as any other props.
Navbar.Menu
Default Menu
Fancy items
Extended
This component was extended using styled() from styled-components.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | The options of the menu. | |
| iconProps | object | {} | The props to pass to the MUI's IconButton when not in desktop mode. |
| label | string | 'menu' | The label of the menu's hamburger icon when viewport is mobile. Used for its meta props. |
The ref will be forwarded to the html root element, as well as any other props.
Navbar.MenuItem
Default MenuItem
Fancy children
Extended
This component was extended using styled() from styled-components.
Props
This component extends Material's UI <Button> so you can use all its props as well. Check out its Api.
The ref will be forwarded to the html root element, as well as any other props.
Navbar.Language
Default Language
Custom items
Extended
This component was extended using styled() from styled-components.
Props
This component extends Material's UI <Button> so you can use all its props as well. Check out its Api.
| Name | Type | Default | Description |
|---|---|---|---|
| smallScreenSupport | bool | true | If set to true, only the 2 first characters of the selectedLanguage will be displayed for very small screens to provide a better responsive design. Set to false to leave the selectedLanguage as it is. |
| selectedLanguage | string | '' | The language's menu selected language. |
The ref will be forwarded to the html root element, as well as any other props.
Navbar.LanguageItem
Default LanguageItem
Fancy children
English yeah! 🤘
Extended
This component was extended using styled() from styled-components.
Props
This component extends Material's UI <MenuItem> so you can use all its props as well. Check out its Api.
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | '' | The language item's label. Used for the meta props of the element. |
| onClick | func | The language item's onclick function. Called when the language is selected in the menu. |
The ref will be forwarded to the html root element, as well as any other props.