Preview

Live Demo

Installation

npm install moffbar
// #or
yarn add moffbar

Usage

Import the Navigation component into your app.tsx or app.js file, and include it with your desired child components:

import React from 'react';
import { Navigation } from 'moffbar';
import Home from './Home'; // Import your components as needed
import WhoWeAre from './WhoWeAre'; // Import your components as needed
const data = [
  { link: '/', name: 'Home' },
  { link: '/whoweare', name: 'Who We Are' },
  // Add more items as needed
  // Keep in mind to list the children inside the navigation bar with the same order you used in the data array
];

const App: React.FC = () => {
  return (
    <div>
      <Navigation data={data} textColor="#333" textStroke="#fff" closeButton="#ccc" closeActive="#999">
        <Home />
        <WhoWeAre />
        {/* Add more children components as needed */}
      </Navigation>
      {/* Your main content goes here */}
    </div>
  );
};

export default App;

Props

data (mandatory)

An array of objects representing the navigation items. Each object should have a link (URL or path) and a name (displayed text). Example

const data = [
  { link: "/", name: "home" },
  { link: "/whoweare", name: "Who We Are" }
];

Note: Ensure that the order of items in the data array aligns with the order of children listed inside the Navigation component for correct redirection.

Prop | Type | Default Value | Description | --------------| -------------- |---------------|--------------------------------------------------------------------------------------------------------------------------------| Data | Array of objects | N/A |An array of objects representing the navigation items. Each object should have a link (URL or path) and a name (displayed text). bgcolor | String | black |The background color of the navbar when expanded. textColor | String | white |The text color of the navigation links. textStroke | String | white |The text stroke color of the navigation links. closeButton | String | black |The color of the burger menu button when idle. closeActive | String | white |The color of the close button when active.

Customization

MoffBar is highly customizable, allowing you to tailor its appearance to suit your application's design. Experiment with different values for bgcolor, textColor, textStroke, closeButton, and closeActive to achieve the desired visual style.

Feel free to explore and modify the component according to your specific requirements!