This documentation refers to a Gravstrap obsolete release. Please consider to upgrade to the new release
The Gravstrap Dropdown component handles the Bootstrap dropdown component.
The dropdown component is defined by the following Yaml code:
gravstrap:
dropdown:
dropdown1:
label: Cool
type: default
# dropup: true
attributes:
aria-haspopup: "true"
aria-expanded: "true"
# class: btn-lg
items:
item0:
type: header
caption: Dropdown header
item1:
type: link
url: "#"
menu: Page1
# attributes:
# class: something-cool
item2:
type: link
disabled: true
url: "#"
menu: Page2
item3:
type: divider
item4:
type: link
url: "#"
menu: Page3 This code must be added to the page where you need to display the component.
label property
The label mandatory property defines the dropdown label.
type property [optional]
The type optional property defines the dropdown type. You can choose one from the following accepted values: default, primary, danger, success, info, warning. Default is the default value for this component.
dropup property
The dropup optional property when true, renders the component as a dropup.
attributes property [optional]
The attributes property defines an array of html tags you can add to the dropdown component.
items property
The items property is an array which defines the elements displayed in the dropdown component.
item's type property
The type mandatory property defines the item type. You can choose one from the following accepted values: link, header, divider.
item's url property [optional]
The url optional property defines the url connected with the item. This property is used only when the link type is selected.
item's menu property [optional]
The menu optional property defines the menu label for the item. This property is used only when the link type is selected.
item's attributes property [optional]
The attributes property defines an array of html tags you can add to the item.
item's caption property [optional]
The caption property defines the caption for the header type.
Render the dropdown component
Add the following code to the template where you need to render the dropdown component:
{{ gravstrap.dropdown1 }}