Company logo
July 17, 2022

Inline bar

Vinay Ayyala's avatar

We are thrilled to announce the first alternative form factor for CommandBar: inline bar! This is now an option alongside our traditional modal formfactor if you want to provide a more traditional experience to users.

If you use inline bar, it's possible to configure CommandBar such that the modal formfactor will appear on narrow screens. To implement, all you need to do is (1) add an inline bar HTML element to your app, (2) update your .boot, and (3) use .setFormFactor:

(1) add the inline bar root element

<div id="commandbar-inline-root" style={{ width: 375 }}></div>

(2) update your boot

window.CommandBar.boot(userId, {}, {type: 'inline', rootElement: 'commandbar-inline-root'});

(3) call setFormFactor


window.CommandBar.setFormFactor({ type: 'inline', rootElement: 'commandbar-inline-root' });