Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
navigation

19 Articles
{
,

}
Direct link to the article How to Create a Shrinking Header on Scroll Without JavaScript
navigation scrolling sticky

How to Create a Shrinking Header on Scroll Without JavaScript

Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real …

Avatar of Håvard Brynjulfsen
Håvard Brynjulfsen on Feb 16, 2021
Direct link to the article I Saw Two Mega Menus Today…
navigation

I Saw Two Mega Menus Today…

One was the footer of an (older) U.S. Government website. The other was the navigation for AWS services from the AWS Console.
Avatar of Chris Coyier
Chris Coyier on Feb 2, 2021
Direct link to the article Parsing Markdown into an Automated Table of Contents
IntersectionObserver markdown navigation vue animations

Parsing Markdown into an Automated Table of Contents

A table of contents is a list of links that allows you to quickly jump to specific sections of content on the same page. It benefits long-form content because it shows the user a handy overview of what content there …

Avatar of Lisi Linhart
Lisi Linhart on Nov 13, 2020
Direct link to the article Menu Reveal By Page Rotate Animation
checkbox hack menu navigation

Menu Reveal By Page Rotate Animation

There are many different approaches to menus on websites. Some menus are persistent, always in view and display all the options. Other menus are hidden by design and need to be opened to view the options. And there are even …

Avatar of Preethi
Preethi on Sep 8, 2020
Direct link to the article Three CSS Alternatives to JavaScript Navigation
navigation

Three CSS Alternatives to JavaScript Navigation

Hey quick! You’ve gotta create the navigation for the site and you start working on the mobile behavior. What pattern do you choose? If you’re like most folks, it’s probably the “hamburger” menu that, when clicked, uses a little JavaScript …

Avatar of Blake Lundquist
Blake Lundquist on Jul 14, 2020
Direct link to the article Sticky Table of Contents with Scrolling Active States
IntersectionObserver navigation

Sticky Table of Contents with Scrolling Active States

Say you have a two-column layout: a main column with content and a sidebar. Say it has a lot of content, with sections that requires scrolling. The sidebar column that is largely empty, such that you can safely put a …

Avatar of Chris Coyier
Chris Coyier on Jan 30, 2020 (Updated on Feb 13, 2020)
Direct link to the article Hamburger Menu with a Side of React Hooks and Styled Components
menu navigation react hooks styled components

Hamburger Menu with a Side of React Hooks and Styled Components

We all know what a hamburger menu is, right? When the pattern started making its way into web designs, it was both mocked and applauded for its minimalism that allows main menus to be tucked off screen, particularly on mobile …

Avatar of Maks Akymenko
Maks Akymenko on Sep 10, 2019 (Updated on Sep 12, 2019)
Direct link to the article Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!
css shapes navigation SVG

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

Let’s have a look at how we can create a row of links that sorta run into each other with a chevron-like shape and notch on each block like you might …

Avatar of Silvestar Bistrović
Silvestar Bistrović on Apr 29, 2019 (Updated on May 3, 2019)
Direct link to the article Creating a Reusable Pagination Component in Vue
navigation pagination vue

Creating a Reusable Pagination Component in Vue

The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there are cases when the best possible way of presentation …

Avatar of Mateusz Rybczonek
Mateusz Rybczonek on Mar 29, 2019
Direct link to the article Using the Little-Known CSS element() Function to Create a Minimap Navigator
element() navigation

Using the Little-Known CSS element() Function to Create a Minimap Navigator

W3C’s CSS Working Group often gives us brilliant CSS features to experiment with. Sometimes we come across something so cool that sticks a grin on our face, but it vanishes right away because we think, “that’s great, but what do …

Avatar of Preethi
Preethi on Feb 5, 2019
Direct link to the article Sticky, Smooth, Active Nav
navigation sticky

Sticky, Smooth, Active Nav

Just like the title says! Here’s a sidebar navigation bar that…

  1. Uses sticky positioning. It stays on the screen when it can, but won’t overlap the header, footer, or ever make any of it’s links inaccessible.
  2. Scrolls smoothly to the
…
Avatar of Chris Coyier
Chris Coyier on Aug 7, 2018
  • 1
  • 2
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top