Responsive React Navigation Component Docs

Back to product

The responsive <Navigation /> component lets you easily create responsive, animated navigations in your React application with dropdown support.

Getting Started

To get started, follow the steps below to start using the responsive <Navigation /> component inside your project.

Import Navigation.tsx and navigation.scss into your project.

Call the <Navigation /> component with an items prop in the following way:

// Import the component at the top
import Navigation from './components/Navigation'

const App = () => {
    const menuItems = [{ name: 'Home', url: '/' }]

    return <Navigation items={menuItems} />
}

Alternatively, you can run the following steps to incorporate the component into a new project by using the project files as a baseline:

Run npm i inside the project directory to install dependencies
Run npm run dev to start the development server. Your new project with the <Navigation /> component already integrated will be served on localhost.
Run npm run build to create a production version from the project and prepare assets for deployment.

Setup

The <Navigation /> component accepts an items prop which requires an array of objects in the following format:

const menuItems = [
    { name: 'Home', url: '/' },
    {
        name: 'Posts',
        children: [
            { name: 'Getting Started', url: '/posts/getting-started' },
            { name: 'Installation', url: '/posts/installation' },
            { name: 'Configuration', url: '/posts/configuration' }
        ]
    }
]

<Navigation items={menuItems} />

Each object must have a name property that generates a menu item. If no children property is specified, the object must also have a url property that specifies the URL for the menu item to link to.

To create a dropdown navigation, we can add a children array to the object with the same name and url properties to create submenu items.

Configuration

Styles can also be easily configured via Sass variables inside navigation.scss:

Variable	Purpose
`$menuPadding`	Sets the padding of the navigation menu.
`$menuItemsPadding`	Sets the padding of the navigation items.
`$subMenuItemsPadding`	Sets the padding of the dropdown items.
`$mobileGap`	Sets the gap between navigation items on mobile.
`$desktopGap`	Sets the gap between navigation items on desktop.
`$breakpoint`	Sets the breakpoint where the mobile layout is replaced with the desktop layout.
`$transition`	Sets the transition timing and easing of the animations.
`$borderRadius`	Sets the border radius of dropdown items.
`$sticky`	Sets whether the navigation bar should be sticky (Follow on scroll).
`$backgroundPrimary`	Sets the primary background color of the navigation menu.
`$backgroundSecondary`	Sets the secondary background color of the navigation menu.
`$text`	Sets the text color.
`$hover`	Sets the background color of navigation items on hover.

The Sass file also includes additional color themes for your convenience. To active a different theme, simply uncomment the necessary block.

Subdirectories

When using the product for bootstrapping new projects with the <Navigation /> component already integrated, you can deploy the project to both root or to a sub-directory. Depending on your use-case, you can use one of the following commands:

npm run dev: Run the development server using root.
npm run dev-subdir: Run the development server using the specified subdirectory.
npm run build: Build the production version using root.
npm run build-subdir: Build the production version using the specified subdirectory.

The subdirectory location can be configured in main.tsx using the routerConfig.basename property. If you need to integrate sub-directory deployments in an existing project, you can also copy the logic flow present in main.tsx.

Further Questions

Do you have questions not covered in this documentation? Please reach out to us using our contact form and we'll get back to you.

Back to product

Secure payment & money back guarantee