Docs >Get Started
Get Started
Here you will learn how to install and set up the package. Toggle-navbar is a dependency made for React, so it assumes you know about it. To learn how to create applications with React, please see their documentation.
Installation
npm i toggle-navbar
Usage
First of all you will need to import the components.
import { CloseButton, SideBar, SideBarContainer } from 'toggle-navbar'To create a toggle-navbar you will need to start by adding a SideBar component wrapped inside a SideBarContainer. In the SideBar component you have to pass the prop buttonContent which allows components, html tags and strings, and is the button that will open the navBar.
1export function SideBar ({ openIcon }) {
2 return (
3 <SideBarContainer>
4 <SideBar
5 buttonContent={<img src={openIcon} />}
6 navClass='bg-[#15181c] w-48'
7 >
8 </SideBar>
9 </SideBarContainer>
10 )
11}Next, to be able to close the navBar we need to add a CloseButton component inside the SideBar component.
1export function SideBar ({ openIcon, closeIcon }) {
2 return (
3 <SideBarContainer>
4 <SideBar
5 buttonContent={<img src={openIcon} />}
6 navClass='bg-[#15181c] w-48 relative'
7 >
8 <CloseButton className='w-max absolute top-5 right-5 h-14'>
9 <img src={closeIcon} />
10 </CloseButton>
11 </SideBar>
12 </SideBarContainer>
13 )
14}Finally as an example, we will add a nav with some links, but you could add whatever you want. Example: shopping cart.
1export function SideBar ({ openIcon, closeIcon }) {
2 return (
3 <SideBarContainer>
4 <SideBar
5 buttonContent={<img src={openIcon} />}
6 navClass='bg-[#15181c] w-48 relative'
7 >
8 <CloseButton className='w-max absolute top-5 right-5 h-14'>
9 <img src={closeIcon} />
10 </CloseButton>
11 <ul className='flex flex-col w-full gap-8 text-[#ddd]/[.7]'>
12 <li>
13 <a href='/home'>home</a>
14 </li>
15 <li>
16 <a href='/info'>info</a>
17 </li>
18 <li>
19 <a href='/about'>about</a>
20 </li>
21 </ul>
22 </SideBar>
23 </SideBarContainer>
24 )
25}