Insites Docs Web Components V2LayoutDropdown

Dropdown

Last updated on August 02, 2024.

Element: <ins-dropdown>

Creates a dropdown menu.

Complete Example

Code Snippet

<ins-dropdown 
  lined
  label="Products"
  link="#"
  link-title="Insites Dropdown"
  target="_blank">

  <ins-dropdown-item
    label="Menu Item" 
    link="#">
  </ins-dropdown-item>

  <ins-dropdown-item 
    submenu
    label="Menu Item with Submenu">

    <ins-dropdown-item
      label="Submenu Item" 
      link="#">
    </ins-dropdown-item>

    <ins-dropdown-item 
      submenu
      label="Submenu Item with Submenu">

      <ins-dropdown-item
        label="3rd Level Item 1" 
        link="#">
      </ins-dropdown-item>

      <ins-dropdown-item
        label="3rd Level Item 2" 
        link="#">
      </ins-dropdown-item>

    </ins-dropdown-item>

  </ins-dropdown-item>

</ins-dropdown>
Default State

Code Snippet

<ins-dropdown></ins-dropdown>
Using HTML Tags
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Code Snippet

<ins-dropdown>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</ins-dropdown>
Dropdown Items

Code Snippet

<ins-dropdown 
  label="Dropdown Menu">

  <ins-dropdown-item
    link="#"
    label="Menu Item 1">
  </ins-dropdown-item>

  <ins-dropdown-item
    link="#"
    label="Menu Item 2">
  </ins-dropdown-item>

  <ins-dropdown-item
    link="#"
    label="Menu Item 3">
  </ins-dropdown-item>

</ins-dropdown>
Target Attribute

Code Snippet

<ins-dropdown 
  label="Dropdown Menu">

  <ins-dropdown-item 
    link="#"
    label="Open in the same tab"
    target="_self">
  </ins-dropdown-item>

  <ins-dropdown-item 
    link="#"
    label="Open in a new tab or window"
    target="_blank">
  </ins-dropdown-item>

</ins-dropdown>
Link Title Attribute

Code Snippet

<ins-dropdown 
  label="Dropdown Menu">

  <ins-dropdown-item 
    link="#"
    label="Hover over this menu item"
    link-title="This is the link title">

  </ins-dropdown-item>

</ins-dropdown>

 

<ins-dropdown> Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string - any Defines the label of the dropdown
lined boolean false true, false Render menu items with a border
link string - any Defines the link of the dropdown item
link-title string - any Defines the value for the <a> tag title attribute
target string _self _self, _blank, _parent, _top Defines the value for the <a> tag target attribute

 

<ins-dropdown-item> Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string - any Defines the label of the dropdown item
link string - any Defines the link of the dropdown item
link-title string - any Defines the value for the <a> tag title attribute
target string _self _self, _blank, _parent, _top Defines the value for the <a> tag target attribute
submenu boolean false true, false Defines if the item has a submenu

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.