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>☰</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