Docs
Native Modules
Navbar

Navbar Module

Overview

The Navbar module is a customizable navigation bar that supports both desktop and mobile layouts. It includes features such as a collapsible mobile menu, a dark mode toggle, 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, which can be modified directly within the module itself.

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

  1. Open your settings.js file
  2. 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"
    };
  • Description: Customize the background and foreground colors for different sections of the navbar. Use the sectionColors prop to override the default color values.
  • Property Descriptions:
    • background: Defines the background color of the Navbar. You can customize it to match your design needs.
    • foreground: Sets the text/foreground color of the Navbar. This can also be customized as needed.
    • mobileMenuBackground: Specifies the background color for the dropdown menu on smaller screens. You can modify this to suit your preferences.
    • mobileMenuForeground: Determines the text/foreground color for the dropdown menu on smaller screens. Customize it to align with your design.
  • Additional Notes:
    • bg-background, text-foreground, etc., are theme colors. For more information, refer to the documentation: Theming.
    • You can easily swap main and accent colors. Just apply accent colors by setting background: "bg-accent" and foreground: "text-accent-foreground".
    • If you want to use your own colors and maintain dark mode support, you can specify classes like bg-white dark:bg-black to ensure the color changes appropriately based on the theme.
    • The sectionColors object can be partially updated with props. For example, if you only want to change the background color while keeping other defaults, you can do it like this:
      <Navbar 
          sectionColors={{ 
              background: "bg-blue-200 dark:bg-blue-700" 
          }}
      />

2. navigation

  • Default Value:
    const defaultNavigation = [
        { name: 'Home', href: '/' },
        { name: 'Pricing', href: '#pricing' },
        { name: 'Contact Us', href: '#contact' },
    ];
  • Description: An array of objects representing the navigation items. Each object should include a name (string) for the label and a href (string) for the link. Customize the navigation items by modifying the navigation prop.

3. cta

  • Default Value: <LoginButton buttonLarge={false} />
  • Description: A call-to-action element, typically used for actions like login or sign-up. If not provided, the default LoginButton is used. Replace the cta prop to use a different call-to-action element.
  • Additional Notes:
    • If you need more information about LoginButton module, please refer to the documentation: LoginButton Module.

4. darkModeButton

  • Default Value: true
  • Description: Determines whether to display the dark mode toggle button. Set this prop to false to hide the dark mode toggle.

5. accountDropdownButton

  • Default Value: true
  • Description: Determines whether to display the account dropdown button. Set this prop to false to hide the account dropdown.

Usage Example without Props

If you want to use the Navbar module with all the default settings, you can simply include it without passing any props:

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

Usage Example with Props

Here’s an example of how to use the Navbar module in your project, fully customized with props:

import Navbar from "@/modules/native/Navbar";
 
const MyPage = () => {
  return (
    <Navbar
      sectionColors={{
        background: "bg-white",
        foreground: "text-black",
        mobileMenuBackground: "bg-gray-100",
        mobileMenuForeground: "text-gray-800"
      }}
      navigation={[
        { name: 'Home', href: '/' },
        { name: 'Features', href: '#features' },
        { name: 'Pricing', href: '#pricing' },
      ]}
      cta={<button className="btn-primary">Sign Up</button>}
      darkModeButton={true}
      accountDropdownButton={false}
    />
  );
}
 
export default MyPage;

In this example:

  • The sectionColors prop customizes the colors for different sections of the navbar.
  • The navigation prop is used to define the navigation items.
  • The cta prop is replaced with a custom sign-up button.
  • The darkModeButton is enabled, while the accountDropdownButton is disabled.

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.