Coral.Shell.MenuBar

Current Version: 1.3.2
Github: @coralui/coralui-component-shell-menubar

The Shell.Menubar and Shell.Menubar.Item components provide container elements for the menu area of the Shell3 pattern. The Shell.Menu component supports the opening and closing of a Menu.Item in an overlay.

Several Shell3 components are intended to work as menu items, such as the Shell.OrgSwitcher, Shell.SolutionSwitcher, Shell.Help, and Shell.User components.

See the Shell 3 documentation, which includes a shell pattern layout diagram, for more details. An example of the Shell3 pattern in action is provided in the coralui-example-shell3 project.

Coral.Shell.MenuBar API

Constructor

JavaScript:

new Coral.Shell.MenuBar() or document.createElement('coral-shell-menubar')

HTML Tag:

<coral-shell-menubar>

Extends

Sub-components

Instance Properties

instance.hidden {Boolean}

Reflected
Whether this component is hidden or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • hidden

instance.items {Coral.Collection}

Readonly
The item collection. See Coral.Collection for more details.

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
 The event name to stop listening for.
selector String Yes
 The selector that was used for event delegation.
func function No
 The function that was passed to on().
useCapture Boolean Yes
 Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
 The event name to listen for.
selector String Yes
 The selector to use for event delegation.
func function No
 The function that will be called when the event is triggered.
useCapture Boolean Yes
 Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it.
Inherited From:

instance.set

Set a single property.
Parameters:
Name Type Description
property String The name of the property to set.
value * The value to set the property to.
silent Boolean If true, events should not be triggered as a result of this set.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
 The event name to trigger.
props Object Yes
 Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
 Set to false to prevent the event from bubbling.
cancelable Boolean Yes
 Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:
Deprecated:
  • since 1.14.0, use MutationObserver instead.

    coral-component:detached

    Triggered when the component is detached to the DOM.
    Callback Parameters:
    Name Type Description
    event Object Event object.
    Inherited From:
    Deprecated:
    • since 1.14.0, use MutationObserver instead.

      coral-component:ready

      Triggerred when the component has been upgraded and is ready for use.
      Callback Parameters:
      Name Type Description
      event Object Event object.
      Inherited From:
      Deprecated:
      • since 1.9.0, use Coral.commons.ready() instead.

        Coral.Shell.MenuBar.Item API

        Constructor

        JavaScript:

        new Coral.Shell.MenuBar.Item() or document.createElement('coral-shell-menubar-item')

        HTML Tag:

        <coral-shell-menubar-item>

        Extends

        Static Properties

        Coral.Shell.MenuBar.Item.iconVariant {String}

        Enum for menubar item iconVariant.

        Properties:

        Name Type Value Description
        DEFAULT String default A default menubar item
        CIRCLE String circle A round image as menubar item

        Instance Properties

        instance.badge {String}

        The notification badge content.
        Default Value:
        • ""
        HTML Attribute:
        • badge

        instance.hidden {Boolean}

        Reflected
        Whether this component is hidden or not.
        Inherited From:
        Default Value:
        • false
        HTML Attribute:
        • hidden

        instance.icon {String}

        Specifies the icon name used inside the menu item. See Coral.Icon for valid icon names.
        Default Value:
        • ""
        HTML Attribute:
        • icon
        See:

        instance.iconSize {Coral.Icon.size}

        Size of the icon. It accepts both lower and upper case sizes.
        Default Value:
        • Coral.Icon.size.SMALL
        HTML Attribute:
        • iconsize
        See:

        instance.iconVariant {Coral.Shell.MenuBar.Item.iconVariant}

        The menubar item's iconVariant.
        Default Value:
        • Coral.Shell.MenuBar.Item.iconVariant.DEFAULT
        HTML Attribute:
        • iconvariant

        instance.label {HTMLElement}

        The menubar item's label content zone.

        instance.menu {HTMLElement | String}

        The menu that this menu item should show. If a CSS selector is provided, the first matching element will be used.
        Default Value:
        • null
        HTML Attribute:
        • menu

        instance.open {Boolean}

        Reflected
        Whether the menu is open or not.
        Default Value:
        • false
        HTML Attribute:
        • open

        Methods

        instance.get

        Get the value of a property.
        Parameters:
        Name Type Description
        property String The name of the property to fetch the value of.
        Returns:
        Property value. {*}
        Inherited From:

        instance.hide

        Hide this component.
        Returns:
        this, chainable {Coral.Component}
        Inherited From:

        instance.off

        Remove an event listener.
        Parameters:
        Name Type Optional Description
        eventName String No
        		 The event name to stop listening for.
        selector String Yes
        		 The selector that was used for event delegation.
        func function No
        		 The function that was passed to on().
        useCapture Boolean Yes
        		 Only remove listeners with useCapture set to the value passed in.
        Returns:
        this, chainable. {Coral.Component}
        Inherited From:

        instance.on

        Add an event listener.
        Parameters:
        Name Type Optional Default Description
        eventName String No
        		 The event name to listen for.
        selector String Yes
        		 The selector to use for event delegation.
        func function No
        		 The function that will be called when the event is triggered.
        useCapture Boolean Yes
        		 Whether or not to listen during the capturing or bubbling phase.
        Returns:
        this, chainable. {Coral.Component}
        Inherited From:

        instance.remove

        Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it.
        Inherited From:

        instance.set

        Set a single property.
        Parameters:
        Name Type Description
        property String The name of the property to set.
        value * The value to set the property to.
        silent Boolean If true, events should not be triggered as a result of this set.
        Returns:
        this, chainable. {Coral.Component}
        Inherited From:

        instance.show

        Show this component.
        Returns:
        this, chainable {Coral.Component}
        Inherited From:

        instance.trigger

        Trigger an event.
        Parameters:
        Name Type Optional Default Description
        eventName String No
        		 The event name to trigger.
        props Object Yes
        		 Additional properties to make available to handlers as event.detail.
        bubbles Boolean Yes
        		 Set to false to prevent the event from bubbling.
        cancelable Boolean Yes
        		 Set to false to prevent the event from being cancelable.
        Returns:
        CustomEvent object {CustomEvent}
        Inherited From:

        Events

        coral-component:attached

        Triggered when the component is attached to the DOM.
        Callback Parameters:
        Name Type Description
        event Object Event object.
        Inherited From:
        Deprecated:
        • since 1.14.0, use MutationObserver instead.

          coral-component:detached

          Triggered when the component is detached to the DOM.
          Callback Parameters:
          Name Type Description
          event Object Event object.
          Inherited From:
          Deprecated:
          • since 1.14.0, use MutationObserver instead.

            coral-component:ready

            Triggerred when the component has been upgraded and is ready for use.
            Callback Parameters:
            Name Type Description
            event Object Event object.
            Inherited From:
            Deprecated:
            • since 1.9.0, use Coral.commons.ready() instead.

              coral-shell-menubar-item:close

              Triggerred after the component is closed with hide() or instance.open = false
              Callback Parameters:
              Name Type Description
              event Object Event object.

              coral-shell-menubar-item:open

              Triggerred after the overlay is opened with show() or instance.open = true
              Callback Parameters:
              Name Type Description
              event Object Event object.

              Coral.Shell.Menu API

              Constructor

              JavaScript:

              new Coral.Shell.Menu() or document.createElement('coral-shell-menu')

              HTML Tag:

              <coral-shell-menu>

              Extends

              Static Properties

              Coral.Shell.Menu.from {Object}

              Overlay animation directions.

              Properties:

              Name Type Value Description
              RIGHT Object right Animate in from the right.
              TOP Object top Animate in from the top.

              Coral.Shell.Menu.placement {Object}

              Overlay placement values.

              Properties:

              Name Type Value Description
              RIGHT Object right Anchor to the right of the page.
              TOP Object top Anchor at the top of the page.

              Instance Properties

              instance.focusOnShow {Coral.mixin.overlay.focusOnShow | HTMLElement | String}

              Whether to focus the overlay, when opened or not (default='off'). If set to 'on', the overlay itself will get focus. This property also accepts an instance of HTMLElement or a selector like ':first-child' or 'button:last-of-type' and will focus the first element found inside the overlay instead of the overlay itself.
              Inherited From:
              Default Value:
              HTML Attribute:
              • focusonshow

              instance.from {Coral.Shell.Menu.from}

              The direction the overlay should animate from.
              Default Value:
              • Coral.Shell.Menu.from.TOP
              HTML Attribute:
              • from

              instance.full {Boolean}

              Whether the overlay should use all available space.
              Default Value:
              • false
              HTML Attribute:
              • full

              instance.hidden {Boolean}

              Reflected
              Whether this component is hidden or not.
              Inherited From:
              Default Value:
              • false
              HTML Attribute:
              • hidden

              instance.open {Boolean}

              Reflected
              Whether this overlay is open or not.
              Inherited From:
              Default Value:
              • false
              HTML Attribute:
              • open

              instance.placement {Coral.Shell.Menu.placement}

              The side of the page the overlay should be anchored to.
              Default Value:
              • Coral.Shell.Menu.placement.RIGHT
              HTML Attribute:
              • placement

              instance.returnFocus {Coral.mixin.overlay.returnFocus}

              Whether to return focus to the previously focused element when closed.
              Inherited From:
              Default Value:
              • Coral.mixin.overlay.returnFocus.OFF
              HTML Attribute:
              • returnfocus

              instance.top {Boolean}

              Whether the overlay should always be on top.
              Default Value:
              • false
              HTML Attribute:
              • full

              instance.trapFocus {Coral.mixin.overlay.trapFocus}

              Whether to trap tabs and keep them within the overlay.
              Inherited From:
              Default Value:
              • Coral.mixin.overlay.trapFocus.OFF
              HTML Attribute:
              • trapfocus

              Methods

              instance.get

              Get the value of a property.
              Parameters:
              Name Type Description
              property String The name of the property to fetch the value of.
              Returns:
              Property value. {*}
              Inherited From:

              instance.hide

              Hide this component.
              Returns:
              this, chainable {Coral.Component}
              Inherited From:

              instance.off

              Remove an event listener.
              Parameters:
              Name Type Optional Description
              eventName String No
              		 The event name to stop listening for.
              selector String Yes
              		 The selector that was used for event delegation.
              func function No
              		 The function that was passed to on().
              useCapture Boolean Yes
              		 Only remove listeners with useCapture set to the value passed in.
              Returns:
              this, chainable. {Coral.Component}
              Inherited From:

              instance.on

              Add an event listener.
              Parameters:
              Name Type Optional Default Description
              eventName String No
              		 The event name to listen for.
              selector String Yes
              		 The selector to use for event delegation.
              func function No
              		 The function that will be called when the event is triggered.
              useCapture Boolean Yes
              		 Whether or not to listen during the capturing or bubbling phase.
              Returns:
              this, chainable. {Coral.Component}
              Inherited From:

              instance.remove

              Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it.
              Inherited From:

              instance.returnFocusTo

              Set the element that focus should be returned to when the overlay is hidden.
              Parameters:
              Name Type Description
              element HTMLElement The element to return focus to. This must be a DOM element, not a jQuery object or selector.
              Returns:
              this, chainable {Coral.Component}
              Inherited From:

              instance.set

              Set a single property.
              Parameters:
              Name Type Description
              property String The name of the property to set.
              value * The value to set the property to.
              silent Boolean If true, events should not be triggered as a result of this set.
              Returns:
              this, chainable. {Coral.Component}
              Inherited From:

              instance.show

              Show this component.
              Returns:
              this, chainable {Coral.Component}
              Inherited From:

              instance.trigger

              Trigger an event.
              Parameters:
              Name Type Optional Default Description
              eventName String No
              		 The event name to trigger.
              props Object Yes
              		 Additional properties to make available to handlers as event.detail.
              bubbles Boolean Yes
              		 Set to false to prevent the event from bubbling.
              cancelable Boolean Yes
              		 Set to false to prevent the event from being cancelable.
              Returns:
              CustomEvent object {CustomEvent}
              Inherited From:

              Events

              coral-component:attached

              Triggered when the component is attached to the DOM.
              Callback Parameters:
              Name Type Description
              event Object Event object.
              Inherited From:
              Deprecated:
              • since 1.14.0, use MutationObserver instead.

                coral-component:detached

                Triggered when the component is detached to the DOM.
                Callback Parameters:
                Name Type Description
                event Object Event object.
                Inherited From:
                Deprecated:
                • since 1.14.0, use MutationObserver instead.

                  coral-component:ready

                  Triggerred when the component has been upgraded and is ready for use.
                  Callback Parameters:
                  Name Type Description
                  event Object Event object.
                  Inherited From:
                  Deprecated:
                  • since 1.9.0, use Coral.commons.ready() instead.

                    coral-overlay:beforeclose

                    Triggerred before the component is closed with hide() or instance.open = false.
                    Callback Parameters:
                    Name Type Description
                    event Object

                    Event object.

                    Name Type Description
                    event.preventDefault function Call to stop the overlay from closing.
                    Inherited From:

                    coral-overlay:beforeopen

                    Triggerred before the component is opened with show() or instance.open = true.
                    Callback Parameters:
                    Name Type Description
                    event Object

                    Event object.

                    Name Type Description
                    event.preventDefault function Call to stop the overlay from opening.
                    Inherited From:

                    coral-overlay:close

                    Triggerred after the component is closed with hide() or instance.open = false
                    Callback Parameters:
                    Name Type Description
                    event Object Event object.
                    Inherited From:

                    coral-overlay:open

                    Triggerred after the overlay is opened with show() or instance.open = true
                    Callback Parameters:
                    Name Type Description
                    event Object Event object.
                    Inherited From: