0

What is recommended approach to display a Dropdown in CommandBar?

There is no build-in support to display a dropdown in CommandBar. I know two ways to work around that.

  1. Label + Dropdown. It's the simplest implementation but I have to take care of for/aria-labelledby attribute, maybe ms-Dropdown-label class. I don't feel it logically correct as we treat label and dropdown separately from component view. That's why I tried the second approach below.
  2. Dropdown + styles. We can get label associated with a dropdown for free. The problem is the layout. Default display for dropdown is 'block' and I have to adjust that as well as padding, default font size etc.

Is there an easy way to achieve it? Or does office-ui-fabric have plan to support dropdown in CommandBar. I feel it a common UI everywhere.

qxg
  • 6,955
  • 1
  • 28
  • 36

1 Answers1

0

You might look at the Office single line ribbon for inspiration. They use the same overflow sets and resize groups as the command bar, and extensively use dropdowns and comboboxes.

I'd probably suggest label + dropdown so that you have a nice encapsolated control you can render inside of the command bar.

Micah Godbolt
  • 224
  • 1
  • 2
  • Thanks for the answer, but I'm afraid it can't help me. 1. Office Online does have many dropdowns in ribbon, but none of them is labeled dropdown. 2. I think both approach can provide nice encapsulation as long as we create a component for it. – qxg Aug 26 '19 at 03:27