3 Tips to Create a Dynamic NavBar | Responsive Web App

This video will showcase 3 tips/methods to make your NavBars more dynamic. We walk through how to create an animated, expanding NavBar in the first section. In the second section, we showcase how to create a hover-state for your NavBar tabs + a selected state for your NavBar tabs. Also, there is a special announcement at the end to help you get started!

Sections:
0:00 Intro
0:21 Expanding/Collapsing Nav Bar
3:11 Selected State + Hover State Nav Bar
7:21 Let's get you started

If you want a live walkthrough, check out the livestreams below:

--------------

FlutterFlow is a low-code builder for native apps, bringing design and development into one tool. With drag-and-drop functionality, you can build pixel-perfect UIs and easily connect your app to live data via Firebase or APIs. Plus, you can add advanced features like push notifications, payments, animations, and more. Whether you build your own custom widgets or write custom code, FlutterFlow makes it easy to bring your app ideas to life.

[AbdRzq]

Thanks for this awesome tutorial. I suggest making this as a widget instead of doing all this conditinal stuff and states, that works responsivly on phones and web.
I know there are some great templates available, but making it as a widget will save a lot of time and effort.
As always, Thank you FF team for your great Jop.

[koen.mortier_fitchen]

Pre-made bottom navs would also be cool. Thanks for this amazing product

[delinesigwagwagwa]

@FlutterflowUniversity, please remember you are serving many builders and students who do not use English as their first language. So please do your best to slow down your pace when explaining the process. I’ve replayed most of the video sections and still can’t figure it out. This content is very informative and helpful. Thanks for putting it out. 🙏🏿

[vitorassissantos]

Another time saving tip is that you can simply use the navOpen variable on the first if condition instead of going through the whole steps of setting "navOpen == true", since the variable already is of boolean type.

[DionV]

Interesting tutorial. Would love to see how to switch from sideNav to bottomNav using components and making things as flexible and easily updated as possible. For example, if there are 4 pages: Home, Company, Contact, Profile; and then we add a new page, Quotes, both sideNav and bottomNav should be able to pick up on the new page and its icon without having to do a lot of copy-and-paste.

[BGdev]

Very well thought out and demonstrated here.
There are ALOT of steps aka mouse clicks and panels to visit to get this done.. why wont you guys introduce some kind of simple CSS + classes?? Things could get done faster and more maintainable!

[hughgallagher]

Is this available as a full FF project template?

[robertowiest]

Hi, Could you make the clone of this project available?

[drt]

At 2.11 navOpen .. if you paste it gives an error "current variable is not valid" .

[Art-]

Hello

Can Flutterflow please make a video how we can add product in backend dashboard as admin? Thank u

[lavotivesolutions]

been trying this for days. background color does not change on hover or when on specific page. Please help

[emiltevatrosyan]

can someone answer what I can do if I don't want to show navbar at bottom, cause on web it's not needed but for navigation as video goes it's shows

[zachkingsford]

Just a note this tutorial is great but it is significantly to fast