Override the default messages component in the navigation drawer

Is it possible to replace the default messages component and view from the navigation drawer?

This is pretty straightforward. What you need to do is explicitly specify a messages item in the <general-section> of the navigation drawer and specify the type attribute as 'messages'. Please note you will also have to specify the indicator attribute.

Docs here, example below,


<?xml version="1.0"?>
<navigation >
        <item label="Main" icon="fa-home" view="main" icon-color="primary"/>
        <item type="messages" label="Custom Messages" on-press="$:navigate.link('custom_messages')" indicator="$:customIndicator()" icon="fa-envelope" />



function customIndicator() {
    var unreadCount = DB.message.where("read != ? and recipient = ?", true, user).count();
    return {value: unreadCount , color:"#ff8c00"};
1 Like