Adobe XD: How to create a horizontal website navigation

In this Adobe XD UI design tutorial, I'll show you how to create a horizontal website navigation.

Horizontal navigations have been around since the beginning, and when you start to look for them they're basically everywhere. The most common use case is of course at the top of websites, allowing users to quickly navigate between pages.

What you'll learn from doing this can be applied to any kind of drop down horizontal navigation you might need to design. I purposely try to keep my tutorials focused on the fundamentals of what you need to learn so that you can take this and apply it to more complex designs.

In this tutorial I'll also show you how to edit nested components to create animated links in the menu hover state. The animation I create is very simplistic just to show you how to do it, but you could really go to town and design something more dynamic.

Feedback and comments always welcome, thanks for watching!

#UIDesign #AdobeXD #UX&D

Thumbnail background image courtesy of: https://unsplash.com/@adrienolichon

Material icons are the property of Google Material Design

--

❤️ Subscribe to the channel: https://bit.ly/2AQm1xh

🐦 Follow UX&D on twitter: https://twitter.com/UX_and_D

💵 Buy design resource files: https://gumroad.com/uxandd

--

Top Adobe XD tutorials

⭐️ Wireframing in Adobe XD: https://www.youtube.com/watch?v=urzT_2sVZzo&t=25s

⭐️Why and how to use UI kits in Adobe XD: https://www.youtube.com/watch?v=82OcSEKNecA&t=21s

⭐️ How to use the grid tool in Adobe XD: https://www.youtube.com/watch?v=QuRgO0AZwjQ&t=15s

⭐️ How to create inner shadows in Adobe XD: https://www.youtube.com/watch?v=p-cf19gUxy4&t=42s

⭐️ How to mask in Adobe XD: https://www.youtube.com/watch?v=1u9bsMkTVac&t=5s

--

Видео Adobe XD: How to create a horizontal website navigation канала UX&D