What is this called, and how do i replicated it in CSS?

Question

I know the title stinks, but as it says i have no idea what the name is for what i want to create.

I want to do a list of links (or rather a menu if you prefer, but with no drop down), that looks like this:

example of a menu i want to create

This is just an example so it isnt very pretty. Its having those arrows in each box, and have them "connected" to eachother, but each box is an individual element. I think this type of style has a name, what is it called? Will help greatly searching for help.

I wish to achieve this by making the elements purely by CSS, and the closest i have come is help from this page: http://www.css3shapes.com/ but i just cant combine them to create the menu.

Any and all kinds of help is appreciated.

A CSS Arrow Box see also: http://stackoverflow.com/questions/16180107/arrow-box-with-css — Eric Hotinger, Oct 17 '13 at 12:22
I'm not sure of the translation, but are you talking about breadcrumbs ? — Sebastien C., Oct 17 '13 at 12:23
I wouldn't call these breadcrumbs necessarily. They don't have to be for navigation. They have many names, including "arrow box" and "steps." Check out http://semantic-ui.com/elements/step.html as another example. — Eric Hotinger, Oct 17 '13 at 12:28
May be we can called it Arrow box serving as breadcrumbs..http://jsfiddle.net/6aH75/2/ — Nikhil N, Oct 17 '13 at 12:30

score 2 · Answer 1 · answered Oct 17 '13 at 12:37

2

It's called BreadCrumbs.

It's easier to "paint" it than you think.

Here's a tip:

This is a single arrow:

enter image description here

And the magic:

enter image description here

answered Oct 17 '13 at 12:37

Reinherd

5,476
7
51
88

score 1 · Accepted Answer · answered Oct 17 '13 at 12:29

1

We used to call it breadcrumbs with arrowboxes. But its up to you. I dont think there is a generic name.
Check out these links
- http://www.red-team-design.com/css3-breadcrumbs
- http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation

answered Oct 17 '13 at 12:29

Gopi Krishna

486
2
6

What is this called, and how do i replicated it in CSS?

2 Answers2