ARNAT - styled-nav

Modular approach to use bootstrap components for quick prototypes, as an entrypoint of the component library.

Usage

import { Nav, NavLink } from '@arnat/styled-nav';

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 '@arnat/styled-nav';
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