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
- Open your
settings.js
file - Set
FIXEDNAVBAR
totrue
to keep the navbar fixed at the top of the page while scrolling. Or set it tofalse
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"
andforeground: "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 thebackground
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 ahref
(string) for the link. Customize the navigation items by modifying thenavigation
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 thecta
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 theaccountDropdownButton
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.