@foundation-base/navbar

Base navbar component for foundation

Props

`logo: object`

The logo prop accepts an object which corresponds to the Logo on the Navbar. It takes the following shape:

logo: {
  image: string;
  link: string;
};

`badges?: Array<object>`

The badges prop accepts an array of objects, each of which correspond to a clickable badge on the Navbar. These badges can be used for displaying special messages (or) promotions (or) offers etc.

The badges array consists of objects of the following shape:

badges?: Array<{
  isPrimary: boolean;
  isRounded: boolean;
  label: string;
  link: string;
}>;

`navs: Array<object>`

The navs prop accepts an array of objects, each of which correspond to a Navigation element on the Navbar.

Clicking on one of these Navigation elements either redirects to a link, or opens a dropdown; based on the type of the Navigation element

In case of Dropdowns, the options within the dropdown are grouped. In the dropdown of a Navigation element, the key corresponds to the groupName and the value corresponds to an array of options that fall under that group. Naming the groupName key as default will place all the options under an unnamed group at the top of the dropdown.

The navs array consists of objects of the following shape:

navs: Array<{
  type: 'link' | 'dropdown';
  label: string;
  isActive?: boolean;
  link?: string;
  dropdown?: {
    [groupName: string]: Array<{
      label: string;
      link: string;
    }>;
  };
}>;

`notifications: object`

The notifications prop accepts an object which corresponds to the Notification bell on the Navbar. It takes the following shape:

notifications: {
  count: number;
  link: string;
};

`profile: object`

The profile prop accepts an object which corresponds to the Profile Avatar on the Navbar. It takes the following shape:

profile: {
  image?: string;
  alt?: string;
  dropdown: {
    [groupName: string]: Array<{
      label: string;
      link: string;
    }>;
  };
};

Install

npm install --save @foundation-base/navbar