@arnat/styled-navbar
TypeScript icon, indicating that this package has built-in type declarations

0.0.12 • Public • Published

ARNAT - styled-navbar

npm Travis branch Codecov branch storybook lerna

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

Package Sidebar

Install

npm i @arnat/styled-navbar

Weekly Downloads

2

Version

0.0.12

License

MIT

Unpacked Size

32.8 kB

Total Files

13

Last publish

Collaborators

  • arnat.technologies
  • rsurjano