Layout

Navbar

Storybook

The Navbar component provides a navigation bar for your web application or website. It provides a flexible and customizable navigation bar that you can integrate into your web application or website. With its various sub-components and configurable props, you can easily create a navigation experience that suits your design and functionality requirements.

Imports

1import { Navbar } from 'dd360-ds'

1import Navbar from 'dd360-ds/Navbar'

Usage

The Navbar component serves as the main container for your navigation bar. Inside the Navbar component, you can place various sub-components, such as the brand logo, navigation links, dropdown menus, and additional content. By customizing the props of the Navbar component, you can modify its appearance and behavior according to your requirements.

The code snippet below shows how to use the Navbar component:

1import { Navbar } from 'dd360-ds'
2
3<Navbar>Navbar content goes here</Navbar>
4

Props:

Brand

The NavbarBrand component represents the branding element within the Navbar. It displays a logo or brand name to help users identify and navigate back to the main page of the application or website. The NavbarBrand component provides a straightforward way to showcase your brand or logo within a navbar. You can set the image source (imgSrc) to the URL of your logo image, which will be rendered alongside the optional name or text.

Also, with the hiddenIn prop, you can specify a breakpoint at which the brand/logo section should be hidden. This feature ensures that the navbar remains clean and responsive on smaller screens, optimizing the user experience.

In addition to displaying a logo image, the component supports the inclusion of other React components or elements through the children prop. This flexibility allows you to add additional branding elements, such as a tagline or a clickable button, to enhance the visual representation of your brand.

1import { Navbar } from 'dd360-ds'
2
3<Navbar>
4  <Navbar.Brand>
5    <Image
6      src="/dd360-black.png"
7      width={130}
8      height={28.5}
9      alt="logo"
10    />
11  </Navbar.Brand>
12</Navbar>
13<br />
14<Navbar>
15    <Navbar.Brand imgSrc='http://lendd3r-frontend-develop.s3-website-us-west-1.amazonaws.com/assets/lendder.53f51ab2.png'/>
16</Navbar>
17

Props:

Group

The NavbarGroup component provides a convenient way to group related navigation items within the Navbar. By utilizing its props, you can control the visibility, content, and spacing of the group to enhance the navigation and organization of your web application or website.

With the hiddenIn prop, you can specify a breakpoint at which the group of items should be hidden. This feature allows you to control the visibility of the group based on the screen size, ensuring a responsive design and optimal user experience. The NavbarGroup component supports customizing the appearance and layout of the group. You can add additional CSS classes through the className prop to apply custom styles. Additionally, the gap prop allows you to specify the gap or spacing between the items in the group, enhancing the visual spacing and alignment.

1import { Navbar, Circle } from 'dd360-ds'
2import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
3
4<Navbar>
5  <Navbar.Group>
6    <Navbar.Brand>
7      <Image
8        src="/dd360-black.png"
9        width={130}
10        height={28.5}
11        alt="logo"
12      />
13    </Navbar.Brand>
14  </Navbar.Group>
15  <Navbar.Group gap='10'>
16    <Text>Item 1</Text>
17    <Text>Item 2</Text>
18    <Text>Item 3</Text>
19  </Navbar.Group>
20  <Navbar.Group gap='10'>
21    <Circle
22      backgroundColor="transparent"
23      border="1px solid #D1D5DB"
24      height="36px"
25      width="36px"
26    >
27      <button
28        className="p-1 rounded-full text-gray-400 hover:text-black focus:outline-none"
29        type="button"
30      >
31        <DynamicHeroIcon icon="BellIcon" className="w-5 h-5 text-blue-700" />
32      </button>
33    </Circle>
34  </Navbar.Group>
35</Navbar>
36

Props:

Item

The NavbarItem component provides a flexible and customizable way to include navigation items within the Navbar. By utilizing its props, you can customize the content and styling of the NavbarItem to create a visually appealing and functional navigation bar for your web application or website.

It integrates with the NavbarContent component by utilizing a context. This enables access to the current context of the Navbar, including the active color and variant set by the NavbarContent component. This ensures consistent styling and behavior throughout the navbar. You can easily highlight a specific NavbarItem as the currently active item by setting the isActive prop to true. This feature is particularly useful for indicating the user's current location within a navigation menu, providing a visual cue and enhancing the user experience. You can style the highlight from the activeColor and variant prop in the NavbarContent context.

1import { Navbar } from 'dd360-ds'
2
3<Navbar>
4  <Navbar.Group gap='10'>
5    <Navbar.Item isActive>Item 1</Navbar.Item>
6    <Navbar.Item>Item 2</Navbar.Item>
7    <Navbar.Item>Item 3</Navbar.Item>
8  </Navbar.Group>
9</Navbar>
10

Props:

Content

The NavbarContent component wraps its children with a context provider. It also provide a container for the content items within the Navbar. It uses the context provider to pass the activeColor and variant values to its children components. This allows child components, such as NavbarItem, to access and apply the appropriate styles based on the active state and variant.

The component supports customization through the activeColor and variant props. The activeColor prop allows you to specify the color scheme for the active item within the Navbar. The variant prop enables you to choose different styling variations, such as underline or highlight, for the Navbar content.

1import { Navbar } from 'dd360-ds'
2
3<Navbar>
4  <Navbar.Content variant='highlight' activeColor='success'>
5    <Navbar.Item isActive>Item 1</Navbar.Item>
6    <Navbar.Item>Item 2</Navbar.Item>
7    <Navbar.Item>Item 3</Navbar.Item>
8  </Navbar.Content>
9</Navbar>
10<br />
11<Navbar>
12  <Navbar.Content variant='underline' activeColor='warning'>
13    <Navbar.Item isActive>Item 1</Navbar.Item>
14    <Navbar.Item>Item 2</Navbar.Item>
15    <Navbar.Item>Item 3</Navbar.Item>
16  </Navbar.Content>
17</Navbar>
18

Props:

Link

The NavbarLink component is used to create navigation links within the Navbar. By using its props and the context provided by the NavbarContent component, you can easily create customizable and interactive navigation links for your web application or website.

The component utilizes the NavbarContent context to access the active color and variant values set within it. This integration allows for consistent styling and behavior of the Navbar links based on the context values. By setting the isActive prop to true, you can highlight a specific NavbarLink as the currently active link. This feature is useful for visually indicating the user's current location within the navigation menu, improving the user experience.

The NavbarLink component supports using a custom LinkComponent to render the underlying HTML anchor element. This allows you to use routing libraries or custom link components that match your application's routing system.

1import { Navbar } from 'dd360-ds'
2
3<Navbar>
4  <Navbar.Content variant='underline' activeColor='warning'>
5    <Navbar.Link to='#navbarlink'><Navbar.Item isActive>Item 1</Navbar.Item></Navbar.Link>
6    <Navbar.Link to='#navbarlink'><Navbar.Item>Item 2</Navbar.Item></Navbar.Link>
7    <Navbar.Link to='#navbarlink'><Navbar.Item>Item 3</Navbar.Item></Navbar.Link>
8  </Navbar.Content>
9</Navbar>
10

Props:

Collapse

NavbarCollapse

The NavbarCollapse component provides a convenient way to create collapsible content sections. It is responsible for managing the collapse and expansion of content within a navigation bar. The component accepts two child elements: NavbarCollapseToggle and NavbarCollapseContent, representing the toggle control and the collapsible content respectively.

The NavbarCollapse component wraps the child elements in a context provider. This allows the child components to access the collapse state and the function to control the collapse and expansion behavior.

NavbarCollapseToggle

The NavbarCollapseToggle component is used within the NavbarCollapse component to provide a toggle button for expanding or collapsing the content of the Navbar. It wraps the content with a context provider and can be customized with the provided props.

The NavbarCollapseToggle component accepts additional props that can be used to customize its appearance and behavior. You can provide your own className, styles, or children to customize the toggle button according to your design requirements. If no children are provided to the NavbarCollapseToggle component, it renders the SquareMenu component as the default toggle icon. Also, you can use the showIn prop to set in which breakpoints the component should be hidden.

NavbarCollapseContent

The NavbarCollapseContent component is used within the NavbarCollapse component to provide collapsible content for the Navbar. It can contain any desired content, such as links, buttons, NavbarItem, NavbarGroup or other components.

The component accepts various props that can be used to customize its appearance and behavior. You can provide a title for the content, choose the active color and variant, control the alignment of the content items, and specify the gap between them.

The component includes a close button that allows the user to collapse the NavbarCollapse component. Clicking on the button triggers a function from the NavbarCollapseContext, updating the collapse state.

1import { Navbar } from 'dd360-ds'
2
3<Navbar>
4  <Navbar.Collapse>
5    <Navbar.CollapseToggle
6        className="cursor-pointer"
7    />
8    <Navbar.CollapseContent
9        activeColor="primary"
10        gap="8"
11        title="Menu"
12    >
13    <Navbar.Link to='#navbarlink'><Navbar.Item isActive>Item 1</Navbar.Item></Navbar.Link>
14    <Navbar.Link to='#navbarlink'><Navbar.Item>Item 2</Navbar.Item></Navbar.Link>
15    <Navbar.Link to='#navbarlink'><Navbar.Item>Item 3</Navbar.Item></Navbar.Link>
16    </Navbar.CollapseContent>
17  </Navbar.Collapse>
18</Navbar>
19

In the example above, the NavbarCollapse component is used within a Navbar component to create a collapsible section. The NavbarCollapseToggle component represents the toggle button, and the NavbarCollapseContent component contains the content to be displayed when the section is expanded. By placing these components within the NavbarCollapse component, you can create a collapsible section in the Navbar.

NavbarCollapse Props:

NavbarCollapseToggle Props:

NavbarCollapseContent Props:

API Reference

Navbar

Brand

Group

Item

Content

Link

Collapse

CollapseToggle

CollapseContent