Someone wrote in to me asking how to create a simple bar navigation with icons. This is a pretty simple layout thing that could be accomplished loads of different ways. List items as inline-block probably makes the most sense in general.
But I’ve been enjoying tinkering with flexbox, so I decided to toss it together with that, and it made for a pretty educational example I think.
Here it is:
See the Pen Bar Navigation with Flexbox and SVG icons by Chris Coyier (@chriscoyier) on CodePen.
Flexbox makes it easy to align the items however you want:
Flexbox makes it easy to allow the menu items to take up as much space as they need, without specifying any exact numbers:
But if you want to apply exact numbers, you can:
Flex items can wrap and the properties can change with media queries:
Flex items are easy to align how you want, even vertically, even with centering:
In the demo, feel free to turn on the outlines to see how the boxes align themselves.
I realize not everyone can use flexbox on everything they work on. Yadda yadda browser support, clients, etc. Some people can, on some projects. After playing with it for stuff like this, I think it becomes clear how important it is going to become.
Is there a fix to enable this working in IE 8 / 9? Would love to use it, but i still know lots of places use old IE.
I’m starting to look at layout as a luxury for end-users with good browsers, and not a requirement that must be met for all end-users.
Sites should still be functional in all browsers, as this is a basic requirement on the path to providing good accessibility. However, I treat old browsers as though the users are blind: content should still have a logical top-to-bottom order, but I don’t even attempt to make things visually pleasing in old browsers.
Ron –
I really like that paradigm. I’m beginning to think along those lines as well. If you want your web experience to be awesome, download an awesome browser ;)
I don’t agree. A lot of users are visiting from company computers, and If you’ve ever worked for a bigger company you know they are usually 2 versions behind or so. So by having the attitude “ignore people with older browsers” you eliminate a lot of potential customers or whatever the site is for..
But most important imo: First look at statistics to see what kind of visitors you have before making too fancy features that none of your visitors can see or use. :)
Great post btw Chris!
Jugge
By adopting a philosophy along the lines of Ron’s “.. a luxury for end-users”, and providing an enhanced experience to those with a capable browser is not, imo, ignoring “people with older browsers”.
Enjoyed the post.
Yeah I know I shouldn’t have written ignore end users, but a lot of the difficulties with web design is to cater for different browsers. I think it’s worth going the extra mile so that people with less fortunate browsers (read IE) can still enjoy cool stuff and enhanced features in terms of usability and what not.
My solution works on ie9, but the fallback doesn’t work on 8.
Realistically, this is where the default for those browsers should just be 100% in width. No layout option for them.
I will be updating my Sass code to cater for all browsers eventually.
Jugge
I suppose the questions is what are those enhanced features worth? Usually they require extra CSS and JS in order to work, which increases page weight. This slows down, at best, already slow and inefficient browsers or, at worst, all browsers. All to provide the user features they’re probably not seeing anywhere else.
If we’re factoring in performance as part of the overall user experience, wouldn’t bogging down sites with hacks actually take away from the experience instead of enhancing it?
Couple extra KBs won’t hurt anyone.
Very cool. Like the way you use GIFs in the tut.
This is a great piece of work. Thanks for sharing.
Very useful tips, I think It’s easy to use it to design pages with multiple columns.
We recently implemented navigation like this using flexbox.
http://christophercooper.com.au/letters/regarding-prayer-flags/
Two layers of it on the homepage:
http://christophercooper.com.au/
I’ve recently been using flexbox in a new CSS Grid I’ve been building (opinions welcome) and I love flexbox. It makes so much more sense than floating elements, display: table-cell and usual 12 column grid css rules.
This little tool you’ve created would’ve helped me a lot if I’d seen it earlier!
As for browser support (which I still need to address) I’m personally only interested in last 2 versions of any vendor.
You know – every time I see a Flex example I get so excited because this really is a great evolution of CSS. Then I have to remind myself that I can use it on maybe 1% of my client projects and I whimper a little. One day Microsoft will force automatic updates for Internet Explorer; and then we’ll be able to exciting new standards like Flexbox before they’d been adopted by everyone else for 3+ years.
I’m in the same boat. I was like, “Dude. That is the cleanest looking navigation layout I have seen and bugger, I can’t use it until maybe next year, maybe…”
Though it’s not for everyone, Flexbox is a real flexible thing when comes to positioning. I’m using it in some of my work with a bit of IE workaround.
By the way, your article presentation is very appealing. Thanks for sharing.
Is there a tutorial/article on css-tricks regarding SVG as was used in this article? I’m an SVG newb and I’ve never seen SVG used like that and I’m curious how it was achieved.
See this: https://css-tricks.com/svg-tabs-using-svg-shape-template/
I have been working on this Sass implementation so it sets up a Flex grid with float fallbacks.
Not completely finished yet, and my Sass can be improved. Work in progress.
Essentially split the code into separate Sass files:
Don’t look at the code in B & C unless you want to enter my world of confusion. :D
Now just implement the last section block “D” which match up with your Parent and Child classes. (Might be worth looking at the HTML for the structure I am dealing with)
Finally there is a better way to making layouts in CSS.
Flexbox seems awesome!! But as a beginner trying to find a job in the field, all I ever hear about is having to make sites cross browser compatible? Has anyone been using singularity.gs at https://github.com/Team-Sass/Singularity I see it gives you lots options because it doesn’t float or push stuff. You can rearrange visual source order of the markup, but I’m a newbie and am just learning about this stuff. I thought I would ask since Chris influenced me into learning Compass and Sass.
Second thought, after messing around with this grid system, you should follow Chris’s advice and not overthink grids. Can’t wait to learn more about Flexbox!
Wonderful demo, thanks Chris.
I am trying to achieve the following layout, but having difficulty.
The <li> elements need to all be the same height (set by whichever is tallest), but the <a> inside each <li> needs to be vertically centered whilst still covering the whole area of the <li>.
Is that achievable?
It was I who wrote in asking about nav bars. This is how mine finally came out: http://myvegancookbook.com/testground/recipe.php?id=136 . I still have a few minor things to work on before it’s finished. It’s responsive, it changes when your browser collapses. I decided not to use flexbox because there are still too many people who visit my site using older browsers. I don’t know how good it looks tehe, I’m pretty new to this.
I have been itching to get into Flexbox, in fact I can think of several projects where my life could have been made a lot easier for using it! When will be the right time to start using it? I guess not long, so perhaps now is the time to start investigating it further!
Thanks Chris for the great demo, you’re a pioneer!
I recently started using flexbox, and I love what it can do. You can utilize it right now for many use-cases, if you provide a fallback. Many of the behaviors of flexbox are easily replicated using display: table, if you only have to support ie8 and up. The ie fallbacks can be easily removed in the next couple of years when we can stop supporting these ridiculous outdated browsers.
And before the “but tablez are evil” comments start, you’re just telling it to behave like a table. Do you think ie8 users are combing the source code to make sure everything is semantic in modern terms? Anyway, I recommend reading http://gregsutphen.com/DOCS/CSS/EverythingYouKnowAboutCSSisWrong.pdf if you still have hangups about css tables. I’ve come to the conclusion that using floats for site layout is even more of a hack than using display: table.
I want to start using flexbox, and also I love it. How can I start my learning? Could you please help me?
Hey Chris,
I think we can even work on font sizing for better responsive design. Shall try the flexigrid.
I’ve been looking at Flexbox lately for a personal project and think I will take the opportunity to use them as older IE makes up such a low number of my visitors (< 3%) this would be a great time to try something new.
We take this approach for our clients, we analyse the data and built a code base using elements that the visitors have support for.
Very nice implementation of Flexbox. I’ve been dealing with spaces between list items and center whole the menu without knowing how many items and their width. I just wonder about the support of Flexbox in browsers. Right now, it’s not fully supported in major browsers, which is a disadvantage.
Chris… what’s happened to your icon fonts that you use in your tab navigation? Using latest FF and all I see for search is “m”. Home has a funny square thing, forums = “9”; snipptet = “Q” etc.? I hate it when things that did work fine all of a sudden quit – for no apparent reason (like when FF auto updates behind my back and breaks something – or about every Google Earth “update” which breaks something else.) Did something happen behind your back with a WP upgrade or something?
Also, have you noticed that: clicking on the “preview” tab on a four line comment with latest FF displays “combombulating preview” for around 7 seconds before displaying – then when you navigate back to write (i.e. finding an error) there is no cursor so you can’t make updates. What do you think? Is this something broken in a FF background update of my browser – or is there an issue somewhere in the code?
Nice, but i too see the need to accommodate users with ie8, as long as people are using company machines or any machine running XP, they will be limited to ie8 … and if the knowledge isn’t available to switch to Firefox or Chrome then you run the risk of alienating potential customers/visitors.