@foundationcomponentrepo/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;
};

view: object

The view prop accepts an object of the following shape:

view: {
  isVisible?: boolean;
  content?: ReactNode;
};

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;
  icon?: string;
  isActive?: boolean;
  href?: string;
  redirect?: (label: string) => void;
  dropdown?: {
    [groupName: string]: Array<{
      label: string;
      icon?: string;
      title?: string;
      redirect?: (label: string) => void;
    }>;
  };
}>;

notifications: object

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

notifications: {
  list: Notification[];
  onOpen?: (list: Notification[]) => void;
  onClose?: (list: Notification[]) => void;
  onSelect?: (notification: Notification) => void;
  onDismiss?: (notification: Notification) => void;
};

The interface Notification is as follows:

interface Notification {
  id: number | string;
  icon: string | React.ReactNode;
  read: boolean;
  content: string | React.ReactNode;
  timestamp: 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;
      icon?: string;
      redirect?: (label: string) => void;
    }>;
  };
};

Install

npm install --save @foundationcomponentrepo/navbar

License

Copyright 2022 UnPlatforms, Inc. © Unplatforms