Installation
Properties
| Property | Description |
|---|---|
| label | Top level menu text |
| icon | Adds an icon next to the label |
| jsonMenu | buids the dropdown menu from a json |
Examples
<gfs-dropdown-menu id="myMenu" icon="expand-more"
label="Static content">
<a href="#"><iron-icon icon="social:person"></iron-icon>Account Settings</a>
<a href="#"><iron-icon icon="warning"></iron-icon>Notifications</a>
<a href="#"><iron-icon icon="exit-to-app"></iron-icon>Sign out</a>
</gfs-dropdown-menu><gfs-dropdown-menu id="myJsonMenu" icon="expand-more"
label="Build with json"
full-menu='[{"name": "Cloud Login", "icon":"cloud"}, {"name": "Help", "icon":"help"}, {"name": "Report a bug", "icon":"bug-report"}]'>
</gfs-dropdown-menu>Styling
| Custom property | Description | Default |
|---|---|---|
| --gfs-dropdown-menu-font-size | menu font size | 13px |
| --gfs-dropdown-menu-background | opened menu background color | #fff |
| --gfs-dropdown-menu-border-radius | menu radius corners | 3px |
| --gfs-dropdown-menu-box-shadow | adds a shadow effect on opened menu box | 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) |
| --gfs-dropdown-menu-background-hover | top level background color (label) | #f7f8fb |
| --gfs-dropdown-menu-top-border | a top border when menu is opened | 5px solid var(--gfs-primary-color) |
| --gfs-dropdown-menu-arrow | color sould be same a above, adds a triangle on top of the opened menu | var(--gfs-primary-color) |
| --gfs-dropdown-border-b | adds a bottom border on each menu item on list | 1px solid #eef1f6 |
| --gfs-dropdown-item-hover | hover menu background color | var(--light-grey-color) |