AppMenu

AppMenu UI Component

Installation

npm i @synerise/ds-app-menu
or
yarn add @synerise/ds-app-menu

Usage

import AppMenu from '@synerise/ds-app-menu'
import Icon from '@synerise/ds-icon';
import { DashboardColorM, DashboardGreyM, SettingsColorM, AnalyticsColorM } from '@synerise/ds-icon/dist/icons';
<AppMenu
activeItem="settings"
top={20}
footer={
<AppMenu.Item id="dashboards" name="Dashboards">
<AppMenu.Item.Icon active={<DashboardColorM />} inActive={<DashboardGreyM />} />
</AppMenu.Item>
}
>
<AppMenu.Item
name="Settings"
id="settings"
subMenu={(
<AppMenu.SubMenu>
<AppMenu.SubMenu.Title>Settings</AppMenu.SubMenu.Title>
<AppMenu.SubMenu.SubTitle>My Account</AppMenu.SubMenu.SubTitle>
<AppMenu.SubMenu.Item active>Account Details</AppMenu.SubMenu.Item>
<AppMenu.SubMenu.Item>Business profile</AppMenu.SubMenu.Item>
</AppMenu.SubMenu>
})
>
<AppMenu.Item.Icon active={<SettingsColorM />} inActive={<SettingsGreyM />} />
</AppMenu.Item>
<AppMenu.Item id="analyics" name="Analytics">
<AppMenu.Item.Icon active={<AnalyticsColorM />} inActive={<AnalyticsGreyM />} />
</AppMenu.Item>
</AppMenu>

Demo

API

AppMenu

PropertyDescriptionTypeDefault
activeItemID of active menu itemstring-
footerFooter of menuReact.ReactNode-
childrenMenu itemsReact.ReactNodeArray-
topDistance from top of window in pxnumber-

AppMenu.Item

PropertyDescriptionTypeDefault
subMenuSubmenu componentReact.ReactNode-
nameName visible in tooltistring-
idID of submenustring-
childrenMenu item children ie. iconReact.ReactNode-

AppMenu.Item.Icon

PropertyDescriptionTypeDefault
activeActive icon componentReact.ReactNode-
inActiveInactive icon componentReact.ReactNode-

AppMenu.SubMenu

PropertyDescriptionTypeDefault
childrenSubmenu elementsReact.ReactNodeArray-

AppMenu.SubMenu.Title

PropertyDescriptionTypeDefault
childrenTitle of submenuReact.ReactNode-

AppMenu.SubMenu.SubTitle

PropertyDescriptionTypeDefault
childrenText of subtitle sectionReact.ReactNode-

AppMenu.SubMenu.Item

PropertyDescriptionTypeDefault
activeWhether item is activeboolean-
childrenItem children ie. linkReact.ReactNode-