NbMenuItem to provide ability to have notification bubble

[pasadyaguy]

Issue type

• bug report
• feature request
• question about the decisions made in the repository

Issue description

Current behavior:

I will start by saying, I absolutely love the simplicity and ease of use of NbMenuItem. I am only requesting an additional feature to be added.

Expected behavior:

I am looking to use this template for our custom built Help Desk application. We have different pages for actions like Approvals and Assignments. I would like to know if there is currently a way to show a notification badge next to the menu item to show the user that they need to visit that page. For example, if the logged in user had 3 approvals waiting their approval, there would be a 3 next to 'My Approvals'.

I tried to upload a photo, but it is not letting me. I can email the example, if needed.

Related code:

export declare class NbMenuItem {
    /**
     * Item Title
     * @type {string}
     */
    title: string;
    /**
     * Item relative link (for routerLink)
     * @type {string}
     */
    link?: string;
    /**
     * Item URL (absolute)
     * @type {string}
     */
    url?: string;
    /**
     * Icon class name
     * @type {string}
     */
    icon?: string;
    /**
     * Expanded by defaul
     * @type {boolean}
     */
    expanded?: boolean;
    /**
     * Children items
     * @type {List<NbMenuItem>}
     */
    children?: NbMenuItem[];
    /**
     * Children items height
     * @type {number}
     */
    subMenuHeight?: number;
    /**
     * HTML Link target
     * @type {string}
     */
    target?: string;
    /**
     * Hidden Item
     * @type {boolean}
     */
    hidden?: boolean;
    /**
     * Item is selected when partly or fully equal to the current url
     * @type {string}
     */
    pathMatch?: string;
    /**
     * Where this is a home item
     * @type {boolean}
     */
    home?: boolean;
    /**
     * Whether the item is just a group (non-clickable)
     * @type {boolean}
     */
    group?: boolean;
    /** Map of query parameters
     *@type {Params}
     */
    queryParams?: Params;
    parent?: NbMenuItem;
    selected?: boolean;
    data?: any;
    fragment?: string;
}

[kharratahmed]

something like this ?

[pasadyaguy]

Yes, is that available now?

[yggg]

Hi @smithbrianscott. Thanks for your kind words. Unfortunately, you can't do this right now. See this answer for details akveo/nebular#467 (comment).
As for now, you need to add our own MenuItem and MenuItemComponent, probably extending nebular classes and slightly modifying the template.

Css solution we used for new icon isn't suitable for you, since you don't have static text, which could be hardcoded in css.

[Steven4294]

bump - this would be an amazing feature! I need it as well

[sprakash1]

i also need it.. plz reply

[Steven4294]

Bump!

[sukeshlaghate]

Need this feature!

[medTL]

could you help me to make my own nbMenuItem component