styled-navbar-component
The bootstrap navbar component made with styled-components.
This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application.
Installation
npm install --save styled-navbar-componentnpm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies
Usage
For detailed information take a look at the documentation.
This example uses
styled-button-component
package
import React from 'react'; import Container from 'styled-container-component';import Button from 'styled-button-component';import Navbar NavbarLink from 'styled-navbar-component';import Nav from 'styled-nav-component'; const NavbarLight = const hidden setHidden = ; return <Navbar > <Nav > <NavbarLink ="#">BRAND</NavbarLink> <Nav > <Button = > <span>☰</span> </Button> </Nav> </Nav> <Nav => <NavbarLink >Active</NavbarLink> <NavbarLink ="#">Link</NavbarLink> <NavbarLink ="#">Link</NavbarLink> <NavbarLink ="#">Disabled</NavbarLink> </Nav> </Navbar> ;;
Usage with react-router-dom.
Just wrap the NavbarLink with the <Link />
component from react-router-dom
.
const myLinkComponent = <div> <Link ="#"> <NavbarLink >Active</NavbarLink> </Link> <Link ="#"> <NavbarLink >Link</NavbarLink> </Link> <Link ="#"> <NavbarLink >Link</NavbarLink> </Link> <Link ="#"> <NavbarLink >Disabled</NavbarLink> </Link> </div>;
Properties
Properties which can be added to the component to change the visual appearance.
light
Type: booleandark
Type: booleanexpandSm
only on Navbar Type: booleanexpandMd
only on Navbar Type: booleanexpandLg
only on Navbar Type: booleanexpandXl
only on Navbar Type: booleanbrand
only on NavbarLink Type: boolean
License
MIT © Lukas Aichbauer