1. Home
  2. Forum
  3. Blazor
  4. Toolbar menu / dropdown button

Toolbar menu / dropdown button

Hi, is it possible to have a menu button / drop down button of some sort in the toolbar (see image for example in Office 365)?

We have seen the example at https://blazor.syncfusion.com/demos/menu-bar/toolbar-integration?theme=bootstrap5  however it changes the Toolbar height, and sometimes we just want an icon, similar to the image below.  We have also tried Split Button, but it does not look like the other ToolBarItems.

Please advise.  Many thanks.


toolbar-dropdown.png


10 Replies
SK Satheesh Kumar Balasubramanian Syncfusion Team November 9, 2021 09:45 AM UTC

Hi John, 
  
Thanks for using Syncfusion Products. 
  
We have validated your reported query "Is it possible to have a menu button / drop down button of some sort in the toolbar" and prepared sample to integrate SfDropDownButton inside SfToolbar which can be downloaded from the following link. 
  
  
Could you please check the above sample and confirm whether the above sample is similar to your requirement? 
  
Regards, 
Satheesh Kumar B 


JO John November 9, 2021 06:30 PM UTC

Thanks for the reply.  The example you provided looks perfect, however we use bootstrap5 and bootstrap5-dark themes, and with theme themes the button does not blend with the rest of the toolbar.  Please see images below.

Please advise.  Thanks


Material (this looks great)

material-toolbar.png  


Bootstrap5 (this does not look like normal toolbar items)

bootstrap5-toolbar.png


Bootstrap5-dark (this does not look like normal toolbar items)


boostrap5-dark-toolbar.png


SK Satheesh Kumar Balasubramanian Syncfusion Team November 10, 2021 12:10 PM UTC

Hi John, 
  
Thanks for your update. 
  
We have validated your reported query "The example you provided looks perfect, however we use bootstrap5 and bootstrap5-dark themes, and with this themes the button does not blend with the rest of the toolbar." and let you know that bootstrap and bootstrap5-dark themes will look like the image you have shared which is the default behavior of our components in bootstrap themes. However, you can customize the toolbar and dropdown menu using the below customized styles. 

  
Index.razor:    
<style> 
    .e-toolbar { 
        background: #fafafa; 
        border: 1px none rgba(0,0,0,0.12); 
    } 
  
    .e-btn.e-dropdown-btn { 
        background-color: #fafafa; 
        border-color: transparent; 
        color: rgba(0,0,0,0.87); 
    } 
  
    .e-toolbar .e-toolbar-items { 
        background: #fafafa; 
    } 
  
    .e-dropdown-popup { 
        background-color: #fff; 
        color: rgba(0,0,0,0.87); 
    } 
  
    .e-dropdown-popup ul { 
        border: none; 
        border-radius: 0; 
        box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%); 
        box-sizing: border-box; 
        font-size: 14px; 
        font-weight: normal; 
        list-style-image: none; 
        list-style-position: outside; 
        list-style-type: none; 
        margin: 0; 
        min-width: 120px; 
        overflow: hidden; 
        padding: 8px 0; 
        -webkit-user-select: none; 
        -ms-user-select: none; 
        user-select: none; 
        white-space: nowrap; 
    } 
  
    .e-dropdown-popup ul .e-item:active, .e-dropdown-popup ul .e-item.e-selected { 
        background-color: #bdbdbd; 
        color: rgba(0,0,0,0.87); 
    } 
  
    .e-dropdown-popup ul .e-item:hover { 
        background-color: #e0e0e0; 
        color: rgba(0,0,0,0.87); 
    } 
  
    .e-dropdown-btn:hover, .e-dropdown-btn.e-btn:hover { 
        box-shadow: none; 
    } 
  
    .e-dropdown-btn:active, .e-dropdown-btn.e-btn:active { 
        box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%); 
    } 
  
    .e-dropdown-btn:focus, .e-dropdown-btn.e-btn:focus { 
        box-shadow: none; 
    } 
  
    .e-dropdown-btn.e-btn:hover { 
        background-color: rgba(226,226,226,0.9844); 
        border-color: transparent; 
        color: rgba(0,0,0,0.87); 
    } 
    .e-dropdown-btn.e-btn:hover, .e-dropdown-btn.e-btn:focus { 
        text-decoration: none; 
    } 
</style> 
  
Could you please check the above sample and confirm whether the above sample is similar to your requirement? 
  
Regards, 
Satheesh Kumar B 


JO John November 10, 2021 05:43 PM UTC

That works great for bootstrap5.  Do you have the equivalent for bootstrap5-dark please?


Thanks


VM Vengatesh Maniraj Syncfusion Team November 11, 2021 11:02 AM UTC

Hi John, 
 
Thanks for the update. 
 
Yes. Please find the below style customization for the bootstrab5-dark theme. 
 
    .e-btn.e-dropdown-btn { 
        background-color: transparent; 
        border-color: transparent; 
    } 
 
    .e-dropdown-btn:active, .e-dropdown-btn.e-btn:active, 
    .e-dropdown-btn:focus, .e-dropdown-btn.e-btn:focus { 
        box-shadow: none; 
    } 
 
    .e-dropdown-popup ul .e-item:active, .e-dropdown-popup ul .e-item.e-selected { 
        background-color: #bdbdbd; 
        color: rgba(0,0,0,0.87); 
    } 
 
 
Could you please check the above sample and confirm whether the sample meets your requirement?  
 
Regards,
Vengatesh  


JO John November 12, 2021 08:35 PM UTC

HI, thanks for the update.  


We are getting the following issues:

  1. When both an icon and text are used, the icon moves to the top left of the text and the height of the toolbar increases.  Please see attached animated gif.
  2. The mouseover color differs from the other toolbar buttons.  Please see attached animated gif.
  3. In dark mode, there is no mouse over color change. (see second attachment)
  4. In dark mode, the color of a non-drop down button after click changes to white (see second attachment).  Please note we are using this css in conjunction with the css you provided at https://www.syncfusion.com/forums/169499/blazor-sftoolbar-items-remain-selected-after-click-with-bootstrap5-css


Please advise, thanks


Attachment: dropdownissues_f88b0482.zip

SK Satheesh Kumar Balasubramanian Syncfusion Team November 17, 2021 11:48 AM UTC

Hi John, 
  
Thanks for your update. 
  
Query 1 & Query 3: 
  
We have validated your reported queries and modified the sample to reproduce the reported issue. But, we were unable to reproduce the reported issue at our end. 
  
Please find the modified sample which prepared for your issue - https://www.syncfusion.com/downloads/support/forum/170194/ze/DropdownIntegration2091776482 
  
Could you please share the below details to reproduce the issue? This will help to validate the issue and provide prompt solution at earliest.    
  • Replicate the issue in above sample or share issue replicating sample if possible
  • Share all toolbar related code snippets with it's styles
  • We need more details about your requirement like image which should have initial load, hover, active and focus state of toolbar item for both themes, since we have provided more customized styles in both forums
  
Query 2: 
  
We have validated your reported query "The mouseover color differs from the other toolbar buttons." and suggest you to use the below customized styles to resolve the reported issue. 
  
Index.razor:    
    .e-toolbar .e-tbar-btn:hover, 
    .e-dropdown-btn.e-btn:hover { 
        background-color: rgba(226,226,226,0.9844); 
        border-color: transparent; 
        color: rgba(0,0,0,0.87); 
    } 
  
.e-toolbar .e-tbar-btn:hover .e-icons, .e-toolbar .e-tbar-btn:hover .e-tbar-btn-text { 
        color: rgba(0,0,0,0.87); 
    } 
  
Query 4: 
  
We have validated your reported query "In dark mode, the color of a non-drop down button after click changes to white" and suggest you to use the below customized styles for dark theme to resolve the reported issue. 
  
Index.razor:    
    .e-toolbar .e-tbar-btn:focus { 
        background: #282d31; 
        box-shadow: none; 
        border: none; 
    } 
  
        .e-toolbar .e-tbar-btn:focus .e-tbar-btn-text { 
            color: #fff; 
            padding: 4px; 
        } 
  
        .e-toolbar .e-tbar-btn:focus .e-icons.e-btn-icon { 
            color: #adb5bd; 
        } 
  
Regards, 
Satheesh Kumar B 


RG Rachel Gomez February 28, 2022 05:30 PM UTC

To enable Toolbars in Outlook 365 follow this steps-


  • Customize the Quick Access Toolbar by using the Options command
  • Click the File tab.
  • Click Options.
  • Click Quick Access Toolbar.
  • Make the changes you want.



Greeting,
Rachel Gomez

SG Sven G October 26, 2023 12:32 PM UTC

Hi @Satheesh Kumar Balasubramanian


this information is really helpful.

However, it would be even more helpful to have this in an online demo.

Perhaps you could consider integrate it in the SfToo

Regards

Sven


VS Venkateshwaran Saravanakumar Syncfusion Team October 27, 2023 11:16 AM UTC

Hi Sven,


We have considered your requirement to include the provided details in our online demo and it will be included in any of our upcoming release.


Regards,

Venkatesh


Loader.
Up arrow icon