Contextmenu Simple component

The context menu component can be assigned to any component. If it's assigned, the user can access this menu if they click the right mouse button, and they can choose from the menu items.

The context menu has a header that has a custom text assigned to it, and it also has a closing button in the top right corner ( 'X' button). The menu can also be closed if the user clicks anywhere else inside the application.

Supported events:

Show, Hide, Animations, Scroll

Style customization

Name

Default value

Derived value

Computed value

Comment

$context-menu-title-font-size $font-size-base $context-menu-title-font-size-->$font-size-base-->0.8125rem 0.8125rem Context menu title font size.
$context-menu-title-font-weight 600 - 600 Context menu title font weight.
$context-menu-title-color $gray-600 $context-menu-title-color-->$gray-600-->#6c757d #6c757d Context menu title color.
$context-menu-title-border 1px solid $border-color $context-menu-title-border-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef 1px solid #e9ecef Context menu title underline type.
$context-menu-title-padding $spacer $spacer ($spacer * 0.5) $context-menu-title-padding-->$spacer $spacer ($spacer * 0.5)-->1rem 1rem (0.5rem) 1rem 1rem (0.5rem) Context menu title padding.
$context-menu-title-min-height $context-menu-title-font-size * 3.5 $context-menu-title-min-height-->$context-menu-title-font-size * 3.5-->$font-size-base * 3.5-->1rem * 3.5 3.5rem Context menu title minimum height.
$context-menu-content-color $body-color $context-menu-content-color-->$body-color-->$gray-900--> #212529 #212529 Context menu content color.
$context-menu-content-padding ($spacer * 0.35) ($spacer * 1.45) ($spacer * 0.35) ($spacer * 0.35) $context-menu-content-padding-->($spacer * 0.35) ($spacer * 1.45) ($spacer * 0.35) ($spacer * 0.35)-->(1rem * 0.35) (1rem * 1.45) (1rem * 0.35) (1rem * 0.35) 0.35rem 1.45rem 0.35rem 0.35rem Context menu content padding.
$context-menu-close-btn-color $gray-500 $context-menu-close-btn-color-->$gray-500-->#adb5bd #adb5bd Context menu closing “x” icon color.
$context-menu-close-btn-hover-color $gray-600 $context-menu-close-btn-hover-color-->$gray-600-->#6c757d #6c757d Context menu closing “x” icon hover color.
$context-menu-close-btn-padding-right $spacer * 0.35 $context-menu-close-btn-padding-right-->$spacer * 0.35-->1rem * 0.35 0.35rem Spacing of the context menu closing “x” icon from the frame to the right.
$context-menu-item-border-radius $border-radius $context-menu-item-border-radius-->$border-radius-->0.25rem 0.25rem Rounding radius of an item frame corner in the dropdown list.
$context-menu-item-line-height $context-menu-title-font-size * 1.8 $context-menu-item-line-height-->$context-menu-title-font-size * 1.8-->$font-size-base * 1.8-->1rem * 1.8 1.8rem Row height of an item in the dropdown list.
$context-menu-item-margin $spacer * 0.3 $context-menu-item-margin-->$spacer * 0.3-->1rem * 0.3 0.3rem Margin of an item in the dropdown list.
$context-menu-item-left-padding $spacer * 1.85 $context-menu-item-left-padding-->1rem * 1.85-->1rem * 1.85 1.85rem Item indentation to the left in the dropdown list.
$context-menu-item-min-height $context-menu-title-font-size * 1.45 $context-menu-item-min-height-->$context-menu-title-font-size * 1.45-->$font-size-base * 1.45-->1rem * 1.45 1.45rem Minimum height of an item in the dropdown list.
$context-menu-item-icon-left-margin -($spacer * 1.45) $context-menu-item-icon-left-margin-->-($spacer * 1.45)-->-(1rem * 1.45) -1.45rem Left margin of an item icon in the dropdown list.
$context-menu-item-icon-right-padding $spacer * 0.35 $context-menu-item-icon-right-padding-->$spacer * 0.35-->1rem * 0.35 0.35rem Spacing between an item icon and the menu title in the dropdown list.
$context-menu-item-color inherit - inherit Dropdown list item color.
$context-menu-item-icon-color $context-menu-item-color $context-menu-item-icon-color-->$context-menu-item-color-->inherit inherit Dropdown list item icon color.
$context-menu-item-font-weight normal - normal Dropdown list item font weight.
$context-menu-input-margin ($spacer * 0.35) $spacer ($spacer * 0.35) $spacer $context-menu-input-margin-->($spacer * 0.35) $spacer ($spacer * 0.35) $spacer-->(1rem * 0.35) 1rem (1rem * 0.35) 1rem 0.35rem 1rem 0.35rem 1rem Context menu filter text item margin.
$context-menu-input-border 1px solid $border-color $context-menu-input-border-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef 1px solid #e9ecef Context menu filter text item frame.
$context-menu-input-border-color-focus $primary $context-menu-input-border-color-focus-->$primary-->#079e97 #079e97 Context menu filter text item active frame color.

Related pages