1.0.10 • Published 1 month ago

@synerise/ds-app-menu v1.0.10

Weekly downloads
315
License
ISC
Repository
github
Last release
1 month ago

id: app-menu

title: 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

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-
1.0.2

4 months ago

1.0.1

4 months ago

1.0.0

4 months ago

1.0.9

2 months ago

1.0.8

2 months ago

1.0.7

2 months ago

1.0.6

3 months ago

1.0.5

3 months ago

1.0.4

3 months ago

1.0.3

3 months ago

1.0.10

1 month ago

0.8.7

4 months ago

0.8.6

4 months ago

0.8.5

4 months ago

0.8.4

5 months ago

0.8.3

5 months ago

0.8.1

5 months ago

0.8.0

5 months ago

0.8.2

5 months ago

0.7.8

6 months ago

0.7.7

6 months ago

0.7.2

8 months ago

0.7.1

8 months ago

0.7.4

7 months ago

0.7.3

7 months ago

0.7.0

8 months ago

0.7.6

7 months ago

0.7.5

7 months ago

0.6.80

8 months ago

0.6.79

9 months ago

0.6.78

9 months ago

0.6.77

9 months ago

0.6.76

9 months ago

0.6.75

10 months ago

0.6.65

11 months ago

0.6.64

12 months ago

0.6.67

11 months ago

0.6.66

11 months ago

0.6.61

1 year ago

0.6.60

1 year ago

0.6.63

12 months ago

0.6.62

1 year ago

0.6.69

11 months ago

0.6.68

11 months ago

0.6.59

1 year ago

0.6.72

10 months ago

0.6.71

10 months ago

0.6.74

10 months ago

0.6.73

10 months ago

0.6.70

10 months ago

0.6.58

1 year ago

0.6.57

1 year ago

0.6.56

1 year ago

0.6.55

1 year ago

0.6.54

1 year ago

0.6.53

1 year ago

0.6.52

1 year ago

0.6.51

1 year ago

0.6.50

1 year ago

0.6.49

1 year ago

0.6.48

1 year ago

0.6.47

1 year ago

0.6.46

1 year ago

0.6.45

1 year ago

0.6.44

1 year ago

0.6.43

1 year ago

0.6.42

1 year ago

0.6.41

2 years ago

0.6.40

2 years ago

0.6.39

2 years ago

0.6.29

2 years ago

0.6.28

2 years ago

0.6.27

2 years ago

0.6.26

2 years ago

0.6.32

2 years ago

0.6.31

2 years ago

0.6.34

2 years ago

0.6.33

2 years ago

0.6.30

2 years ago

0.6.36

2 years ago

0.6.35

2 years ago

0.6.38

2 years ago

0.6.37

2 years ago

0.6.25

2 years ago

0.6.24

2 years ago

0.6.21

2 years ago

0.6.23

2 years ago

0.6.22

2 years ago

0.6.20

2 years ago

0.6.18

2 years ago

0.6.17

2 years ago

0.6.19

2 years ago

0.6.16

2 years ago

0.6.15

2 years ago

0.6.14

2 years ago

0.6.13

3 years ago

0.6.12

3 years ago

0.6.11

3 years ago

0.6.9

3 years ago

0.6.8

3 years ago

0.6.10

3 years ago

0.6.5

3 years ago

0.6.4

3 years ago

0.6.3

3 years ago

0.6.2

3 years ago

0.5.4

3 years ago

0.5.5

3 years ago

0.6.1

3 years ago

0.6.0

3 years ago

0.5.3

4 years ago

0.5.0

4 years ago

0.5.2

4 years ago

0.5.1

4 years ago

0.4.79

4 years ago

0.4.78

4 years ago

0.4.76

4 years ago

0.4.77

4 years ago

0.4.75

4 years ago

0.4.73

4 years ago

0.4.74

4 years ago

0.4.72

4 years ago

0.4.71

4 years ago

0.4.70

4 years ago

0.4.69

4 years ago

0.4.68

4 years ago

0.4.67

4 years ago

0.4.66

4 years ago

0.4.65

4 years ago

0.4.64

4 years ago

0.4.63

4 years ago

0.4.62

4 years ago

0.4.59

4 years ago

0.4.54

4 years ago

0.4.55

4 years ago

0.4.56

4 years ago

0.4.53

4 years ago

0.4.52

4 years ago

0.4.51

4 years ago

0.4.50

4 years ago

0.4.49

4 years ago

0.4.48

4 years ago

0.4.46

4 years ago

0.4.47

4 years ago

0.4.44

4 years ago

0.4.45

4 years ago

0.4.43

4 years ago

0.4.42

4 years ago

0.4.41

4 years ago

0.4.40

4 years ago

0.4.39

4 years ago

0.4.38

4 years ago

0.4.37

4 years ago

0.4.36

4 years ago

0.4.35

4 years ago

0.4.34

4 years ago

0.4.32

4 years ago

0.4.31

4 years ago

0.4.30

4 years ago

0.4.29

4 years ago

0.4.28

4 years ago

0.4.27

5 years ago

0.4.26

5 years ago

0.4.25

5 years ago

0.4.24

5 years ago

0.4.23

5 years ago

0.4.22

5 years ago

0.4.21

5 years ago

0.4.20

5 years ago

0.4.19

5 years ago

0.4.18

5 years ago

0.4.17

5 years ago

0.4.16

5 years ago

0.4.15

5 years ago

0.4.14

5 years ago

0.4.13

5 years ago

0.4.11

5 years ago

0.4.10

5 years ago

0.4.9

5 years ago

0.4.8

5 years ago

0.4.7

5 years ago

0.4.6

5 years ago

0.4.4

5 years ago

0.4.3

5 years ago

0.4.2

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago

0.3.62

5 years ago

0.3.61

5 years ago

0.3.60

5 years ago

0.3.59

5 years ago

0.3.58

5 years ago

0.3.57

5 years ago

0.3.56

5 years ago

0.3.55

5 years ago

0.3.54

5 years ago

0.3.53

5 years ago

0.3.52

5 years ago

0.3.51

5 years ago

0.3.50

5 years ago

0.3.49

5 years ago

0.3.48

5 years ago

0.3.47

5 years ago

0.3.46

5 years ago

0.3.45

5 years ago

0.3.44

5 years ago

0.3.43

5 years ago

0.3.42

5 years ago

0.3.41

5 years ago

0.3.40

5 years ago

0.3.39

5 years ago

0.3.38

5 years ago

0.3.37

5 years ago

0.3.36

5 years ago

0.3.35

5 years ago

0.3.34

5 years ago

0.3.33

5 years ago

0.3.32

5 years ago

0.3.31

5 years ago

0.3.30

5 years ago

0.3.29

5 years ago

0.3.28

5 years ago

0.3.27

5 years ago

0.3.26

5 years ago

0.3.25

5 years ago

0.3.24

5 years ago

0.3.23

5 years ago

0.3.22

5 years ago

0.3.21

5 years ago

0.3.20

5 years ago

0.3.19

5 years ago

0.3.18

5 years ago

0.3.17

5 years ago

0.3.16

5 years ago

0.3.15

5 years ago

0.3.14

5 years ago

0.3.13

5 years ago

0.3.12

5 years ago

0.3.11

5 years ago

0.3.10

5 years ago

0.3.9

5 years ago

0.3.8

5 years ago

0.3.7

5 years ago

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.8

5 years ago

0.1.9

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago

0.0.1

5 years ago