Navbar Module

Overview

The Navbar module is a customizable navigation bar that supports both desktop and mobile layouts. It includes features such as a submenu dropdown, collapsible mobile menu, a dark mode toggle, call-to-action button, and a user account dropdown. The component is fully responsive, adapting to various screen sizes to provide a mobile-friendly experience.

Location

The source code for the Navbar module can be found in the /modules/native/Navbar.js file.

Usage

The Navbar module can be customized using props. Most props have default values. You can also edit the default values directly, but we recommend using props or copying the code to your own file (use /modules/custom folder to keep files). This way you will avoid conflicts with StartupBolt updates.

Fixed Navbar Configuration

The Navbar module can be configured to remain fixed at the top of the page while scrolling. This is controlled by the FIXEDNAVBAR setting in your settings.js file.

Setting up Fixed Navbar

Open your settings.js file
Set FIXEDNAVBAR to true to keep the navbar fixed at the top of the page while scrolling. Or set it to false to allow the navbar to scroll with the page.

Props

1. `sectionColors`

Default Value:

const defaultSectionColors = {
    background: "bg-background",
    foreground: "text-foreground",
    mobileMenuBackground: "bg-accent",
    mobileMenuForeground: "text-accent-foreground",
    dropdownBackground: "bg-background"
};

Description: Customize the background and foreground colors for different sections of the navbar.
Property Descriptions:
- background: Defines the background color of the Navbar
- foreground: Sets the text/foreground color of the Navbar
- mobileMenuBackground: Specifies the background color for the mobile menu
- mobileMenuForeground: Determines the text color for the mobile menu
- dropdownBackground: Defines the background color for desktop submenu dropdowns
Additional Notes:
- Colors use Tailwind's theme system. For more information, refer to the documentation: Theming
- You can swap main and accent colors by using classes like bg-accent and text-accent-foreground
- For custom dark mode support, use Tailwind's dark mode modifier (e.g., bg-white dark:bg-black)
- Props can partially update colors. Example:
```
<Navbar 
    sectionColors={{ 
        background: "bg-blue-200 dark:bg-blue-700" 
    }}
/>
```

2. `navigation`

Default Value:

const defaultNavigation = [
    { name: 'Home', href: '/' },
    { name: 'Docs', href: '/docs' },
    { name: 'Pricing', href: '/#pricing' },
    { name: 'Blog', href: '/blog' },
    {
        name: 'More',
        href: '#',
        submenu: [
            { name: 'Features', href: '/#features' },
            { name: 'Our Team', href: '/#team' },
            { name: 'FAQ', href: '/#faq' },
        ]
    },
];

Description: Configures the navigation menu items
Properties for each item:
- name (string): Display text for the navigation item
- href (string): URL or anchor link for the item
- submenu (optional array): Creates a dropdown menu with sub-items
  - Each submenu item has the same name and href properties
Note: Set to null or empty array to hide navigation items completely

3. `cta`

Default Value: <LoginButton buttonLarge={false} />
Description: Call-to-action element displayed in the navbar
Note:
- Set to null to hide the CTA completely
- Replace the cta prop to use a different call-to-action element.
Additional Info: See LoginButton Module for customization options

4. `darkModeButton`

Default Value: true
Description: Controls visibility of the dark mode toggle button
Note: Set this prop to false to hide the dark mode toggle.

5. `accountDropdownButton`

Default Value: true
Description: Controls visibility of the account dropdown button
Note: Set this prop to false to hide the account dropdown.

Usage Examples

Basic Usage

import Navbar from "@/modules/native/Navbar";
 
const MyPage = () => {
  return <Navbar />;
}

Custom Configuration

import Navbar from "@/modules/native/Navbar";
 
const MyPage = () => {
  return (
    <Navbar
      sectionColors={{
        background: "bg-white dark:bg-gray-900",
        foreground: "text-gray-800 dark:text-gray-200",
        mobileMenuBackground: "bg-gray-100 dark:bg-gray-800",
        mobileMenuForeground: "text-gray-800 dark:text-gray-200"
      }}
      navigation={[
        { name: 'Home', href: '/' },
        { name: 'About', href: '/about' },
        { 
          name: 'Services', 
          href: '#',
          submenu: [
            { name: 'Consulting', href: '/services/consulting' },
            { name: 'Development', href: '/services/development' }
          ]
        }
      ]}
      cta={<button className="btn-primary">Get Started</button>}
      darkModeButton={true}
      accountDropdownButton={false}
    />
  );
}

Mobile Responsiveness

The navbar automatically adapts to different screen sizes:

Desktop: Full horizontal navigation with dropdowns on hover
Mobile: Hamburger menu with collapsible navigation and animated transitions
Breakpoint: Uses 'lg' (1024px) as the mobile/desktop breakpoint

Conclusion

The Navbar module is a responsive navigation bar that can be easily customized to fit your project’s needs. By adjusting the provided props, you can tailor the navbar to match your site's design and functionality requirements.

LoginButton PayButton