ARNAT - styled-navbar

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

Usage

import React from 'react';

import { Container } from '@arnat/styled-container';
import { Button } from '@arnat/styled-button';
import { Navbar, NavbarLink } from '@arnat/styled-navbar';
import { Nav } from '@arnat/styled-nav';

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>
);

Properties

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

• light Type: boolean
• dark Type: boolean
• expandSm only on Navbar Type: boolean
• expandMd only on Navbar Type: boolean
• expandLg only on Navbar Type: boolean
• expandXl only on Navbar Type: boolean
• brand only on NavbarLink Type: boolean