Search⌘ K

Initial UI Layout

Explore how to build the initial user interface for a Redux project by implementing a tab bar with Semantic UI's Menu component. Understand how to manage tab states and organize project structure to set a foundation for further UI development.

We'll cover the following...

Let’s review the original mockup for Project Mini-Mek’s UI:

widget

The main part of our layout is a tab bar with tabs for the four main panels. Semantic-UI’s <Menu> component can be configured to display in a tabbed form, so we can go ahead and render an initial hardcoded version of our tabs:

...