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, { DashboardColorM, DashboardGreyM, SettingsColorM, AnalyticsColorM } from '@synerise/ds-icon';

<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

Property	Description	Type	Default
activeItem	ID of active menu item	string	-
footer	Footer of menu	React.ReactNode	-
children	Menu items	React.ReactNodeArray	-
top	Distance from top of window in px	number	-

AppMenu.Item

Property	Description	Type	Default
subMenu	Submenu component	React.ReactNode	-
name	Name visible in toolti	string	-
id	ID of submenu	string	-
children	Menu item children ie. icon	React.ReactNode	-

AppMenu.Item.Icon

Property	Description	Type	Default
active	Active icon component	React.ReactNode	-
inActive	Inactive icon component	React.ReactNode	-

AppMenu.SubMenu

Property	Description	Type	Default
children	Submenu elements	React.ReactNodeArray	-

AppMenu.SubMenu.Title

Property	Description	Type	Default
children	Title of submenu	React.ReactNode	-

AppMenu.SubMenu.SubTitle

Property	Description	Type	Default
children	Text of subtitle section	React.ReactNode	-

AppMenu.SubMenu.Item

Property	Description	Type	Default
active	Whether item is active	boolean	-
children	Item children ie. link	React.ReactNode	-