Styled-navbar-component NPM

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-component
npm 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';

export const NavbarLight = () => {
  const [hidden, setHidden] = useState(true);

  return (
    <Navbar expandSm light>
      <Nav start>
        <NavbarLink light brand href="#">BRAND</NavbarLink>
        <Nav end>
          <Button
            light
            outline
            toggleCollapse
            expandSm
            onClick={() => setHidden(!hidden)}
          >
            <span>&#9776;</span>
          </Button>
        </Nav>
      </Nav>
      <Nav start collapse expandSm hidden={hidden}>
        <NavbarLink light active>Active</NavbarLink>
        <NavbarLink light href="#">Link</NavbarLink>
        <NavbarLink light href="#">Link</NavbarLink>
        <NavbarLink light disabled href="#">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 to="#">
      <NavbarLink light active>Active</NavbarLink>
    </Link>
    <Link to="#">
      <NavbarLink light>Link</NavbarLink>
    </Link>
    <Link to="#">
      <NavbarLink light>Link</NavbarLink>
    </Link>
    <Link to="#">
      <NavbarLink light disabled>Disabled</NavbarLink>
    </Link>
  </div>
);