styled-nav-component

The bootstrap nav 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-nav-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.

import {
  Nav,
  NavLink,
} from 'styled-nav-component';

const Navigation = (props) => (
  <Nav мertical>
    <NavLink href="#" active>Active</NavLink>
    <NavLink href="#">Link</NavLink>
    <NavLink href="#">Link</NavLink>
    <NavLink href="#" disabled>Disabled</NavLink>
  </Nav>
);

Usage with react-router-dom.

import {
  Nav,
  NavLink,
} from 'styled-nav-component';
import { Link } from 'react-router-dom';

const MyNavWithReactRouterDom = (props) => (
  <Nav vertical>
    <Link to="#">
      <NavLink tabs active>Active</NavLink>
    </Link>
    <Link to="#">
      <NavLink tabs>Link</NavLink>
    </Link>
    <Link to="#">
      <NavLink tabs>Link</NavLink>
    </Link>
    <Link to="#">
      <NavLink tabs disabled>Disabled</NavLink>
    </Link>
  </Nav>
);

Properties

Properties which can be added to the component to change the visual appearance.

• collapse only on Nav Type: boolean
• expandSm only on Nav Type: boolean
• expandMd only on Nav Type: boolean
• expandLg only on Nav Type: boolean
• expandXl only on Nav Type: boolean
• hidden only on Nav Type: boolean
• start only on Nav Type: string
• center only on Nav Type: string
• end only on Nav Type: string
• vertical only on Nav Type: string
• justified only on Nav Type: string
• fill only on Nav Type: string
• tabs only on NavLink Type: string
• pills only on NavLink Type: string
• noRadius only on NavLink Type: string
• active only on NavLink Type: string
• disabled only on NavLink Type: string
• item only on NavLink Type: string

License

MIT © Lukas Aichbauer