Chapter 3 › Lesson 10

10. Create Active and Inactive Nav States Using Variants

Skills: Create nav item component; Add variant property e.g. State; Create Default and Active variants; Change icon and label colour per variant

A nav item needs to look different when it's active vs inactive. You achieve this with component variants — a single component that can switch between a Default state and an Active state.

Step-by-step

1. Select one of your nav items (icon + label frame) and press Ctrl + Alt + K to create a component
2. In the right panel, find the Properties section and click the + icon next to Variant
3. Name the variant property "State" and give it two values: "Default" and "Active"
4. In the Default variant, keep the icon grey (#8a8a82) and the label grey — this is the inactive look
5. Click the empty variant cell labelled "Active" to switch to editing that variant
6. In the Active variant, change the icon fill to your brand colour (e.g. #1a56db) and the label text to the same colour
7. Optionally add a filled background rectangle behind the icon in the Active variant
8. Rename instances to use meaningful layer names (like "Icon", "Label") — this helps with variant organisation
9. Click back to the Default variant. The grid in the Properties panel shows both variants
10. When you use instances of this component, you can switch between Default and Active from the Properties panel