Minimize or adjust the width of the Carbon tab bar

We love using Carbon to expose use cases to customers in a ‘workspace’-like environment, but some customers report that the tab bar at the top takes up more space than needed on small laptops. It also causes some confusion when the embedded Workshop modules also have their own top bar.

Is there a way we can customize it to either make it thinner or minimize it so that Workshop modules can be viewed in ‘full screen’?

Not a direct answer, but we’ve found we can get many of the same benefits of Carbon with a Workshop-only implementation instead. In brief, we have a container Workshop and other embedded Workshops. Alternately, sometimes we just use Workshop as a custom homepage that serves to let users navigate to other Workshop apps, which open in new tabs. Whether it’s different pages or tabs within a single Workshop container app or stand-alone Workshop apps that open in new browser tabs depends on what UX we want to achieve. But the upshot is that we have a lot of customizability that we don’t necessarily have with Carbon and we benefit from Workshop’s seemingly higher rate of new feature development.

1 Like

There is no ability to customize the size of the Carbon navigation bar at the top of the page, but it does resize based on the height of the browser window, taking up less space as the window is resized smaller.

+1 to @taylor’s suggestion of considering if you actually need the Carbon wrapper. If the Workshop modules you are embedding have their own top navigation bars they may be better off operating in separate browser tabs.

Otherwise, if you do need Carbon, you could consider reworking your Workshop modules to use a sidebar navigation paradigm - keep an eye out for new features coming soon to support vertical headers in Workshop!