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

Next Post Previous Post