Minimal timeline design help

Hello! I’m making an horizontal timeline to navigate a certain function of my web site. The nicest timeline I’ve found is this: https://codyhouse.co/gem/horizontal-timeline.

It’s minimal, responsive and easy to use, anyway my timeline could be very very long, so arrow scroll could be frustrating for the users. I’ve decided to add a search bar in order to jump to desired date in the timeline. However I’m really struggling on where to put this searchbar without break the minimal and clear design.

I was thinking to put somewhere the search icon and expand the search bar on icon click (and maybe fade out a little bit the timeline), but where? Has anyone a good idea?

I’m just talking about mockup, no code for now :slight_smile:

What platform is your site built on? Is is straight HTML, WordPress, etc.?

It’s built in JavaScript for both front and backend, running on NodeJS, but I’m able to code almost everything, what I need is just a nice idea :smile:

OK, gotcha. How about these as inspiration?

https://www.hongkiat.com/blog/timeline-in-web-design/

https://bashooka.com/inspiration/stunning-timeline-designs/

https://venngage.com/blog/timeline-template/

As for search, I would consider dates vs milestones—or both—based on how someone might search. In other words, would they be more concerned with when something happened or what happened?

You could have a sticky header that has a search of sorts, whether that’s a search field or some kind of mini navigation by months/years or milestones.

©2019 Graphic Design Forum | Contact | Legal | Twitter | Facebook