面包屑导航

Problem
The users need to know where they are in a hierarchical structure and navigate back to higher levels in the hierarchy

Solution
Show the hierarchical path from the top level to the current page and make each step clickable

From www.macromedia.com

Use when
Sites with a large hierarchical information structure, typically more than 3 levels deep. Such sites are medium to large sized and include E-commerce Site, catalogs, Portal Site, Corporate Site etc. The site has got some type of Main Navigation that allows users to traverse the hierarchy. Users may want to jump several steps back instead of following the hierarchy. Users may be unfamiliar with the hierarchical structure of the information.

How
The path shows the location of the current page in the total information structure. Each level of the hierarchy is labeled and functions as a link to that level. The current page is marked in order to give the users feedback about where they are now and should not be a link. Don"t use the current page name in the breadcrumb as the only way to show section title, add a title anyway.

The path shows that a top-down path is traversed by using appropriate separators such as > or \ that suggest a downward motion. If the path becomes too long to fit in the designated place, some of the steps can be replaced by an ellipsis e.g. "...". The path is placed in a separate "bar" that preferably spans the entire width of the content area. It is placed close to the content area, preferably above the content area but below the page header.

Why
The bread crumbs show the users where they are and how the information is structured. Because users see the way the hierarchy is structured they can learn it more easily. By making each label a link, the users can quickly browse up the hierarchy. They take up minimal space on the page and leave most of the space for the real content. Breadcrumbs are not for primary navigation and should always be used together with a form of Main Navigation. Usability testing has shown that breadcrumbs are never cause trouble and that at least some people use them. So it is nearly always good to use them.

The name breadcrumb refers to the fairy-tale of Hansel and Gretel where a breadcrumb trail is used to mark the places Hansel has been. If the analogy were correct a breadcrumb should show the history of the users" actions rather than the position in the hierarchy. So the name breadcrumb is actually wrong...

More Examples

This example is taken from Sun"s web site and shows the use of bread crumbs in product pages. The path from the top level is visible and the users can go to any of the other higher level product categories.


This example from World66 combines a Fly-out Menu with a breadcrumb....!!!

Implementation
Usually a CMS provides a standard component for creating breadcrumbs. If you are not using a CMS but you have a database driven site, you can easily write some custom code for it.

时间: 2024-12-31 01:49:02

面包屑导航的相关文章

网站的主导航与面包屑导航

在很多大厦或是大型超市的入口处一般都会树立路牌之类的标识来为用户指明方向,而进入到内部后则会有另外更详细的导航指示.这两者之间的关系就像是网站的主导航与面包屑导航一样,前者为用户做一个大概的结构介绍,而后者则是在大架构之后的细节延伸. 面包屑导航可以很清晰的标明用户当前所处的位置以及可供返回的链接,这在很大程度上解决了用户在网站里迷失的问题.用户从庞杂的入口到最终的目的地,面包屑导航是按一种递减的结构来呈现的. 然而这种递减的结构的最上级应不应该包括"首页"这个最大最杂的入口呢?如果面

浅谈南京58同城面包屑导航优化手法

做网站的都是知道面包屑路径这个名词,一个内容丰富的大站,如果没有面包屑导航的话,搜索引擎蜘蛛很容易迷路,同时面包屑导航优化也是属于站内优化方法的一部分.那我们该如何去优化面包屑导航使得网站权重排名提升呢?这个问题我们需要南京58同城网站来来回答我们. 首先打开先再百度搜索"南京58同城",之后点击排名第一的官网就可以进入58同城南京地区了.首先看一下,58同城SEO人员是用二级域名做的,所以说南京58同城是一个独立的二级域名,非二级目录.接着我们在往下看它的面包屑路径.   如图箭头所

新增一级目录24小时内现谷歌面包屑导航分析

记录一个事件,昨天零晨的时候,我把一个网站的一级导航栏,删了了一部分,同时又增加了一部分,而且是在昨天下午的时候,把每个新增加的栏目里更新了几篇文章.就在刚才,本人查看搜索引擎收录的情况时发现,google对于每个新增加的目录里的每篇文章都收录了.而且,还对于新增加的目录,给了一个面包屑导航. 为何一个新增加的目录能在这么段的时间里有google给予这么高的权重?而且,还是在什么有外部链接的情况下.并搜索部分长尾发现,排名很好基本上都在首页.本人分析如下: 1.首先新增加的目录继承了主站的权重,

实例图说面包屑导航如何帮你简化站点的导航结构

导航是web产品中应用最广泛的基础组成之一,其主要功能是引导访客了解到站点的内容结构进而找到目标信息.作为基础组成之一,导航看起来简单,但却页面设计中最复杂繁琐的工序之一.因为作为站长我们想要网站结构更简洁明了.更快速的为我们的用户提供信息.但是问题出现了,简化了导航栏,访客可能无法快速了解到站点结构以及自己的位置,产生困惑;复杂了,导航臃肿不堪,层峦叠嶂,既不美观也不好用.那么我们应该如何处理呢?我们可以使用面包屑导航来让导航更方便,同时简化我们的导航结构. 面包屑导航通常会安放在出现在页面顶

浅析面包屑导航的作用及常见的面包屑导航类型

面包屑导航对于你的站点来说虽然不是重要的组成部分,但是笔者认为面包屑导航是一种提高你的站点的友好体验的很好的方式.面包屑一词来源于著名的童话故事,故事中汉塞尔和格莱特在森林中迷路了,但是后来他们通过撒在路上的面包屑找到了出路.那么面包屑导航对你的站点来说有什么作用? 面包屑导航对于你的站点来说是一个次要的组成部分,一般出现在主导航的下面.标题栏或者页面的顶部.面包屑位置一定要容易让访客找到,因为搜索引擎只是指引访客到你的站点,面包屑导航可以帮助访客知道他们目前在哪里,并且可以带访客到更高级的页面

CSS 面包屑导航栏2个例子

  方法一, 说明:本方法使用CSS3,无图片,兼容各种webkit系浏览器,同时兼容IE8+.先上图: 1.首先是HTML代码,比较简单,只需要一个简单的ul和li即可  代码如下   <div id="crumbs"> <ul>  <li><a href="#">首页</a></li>  <li><a href="#">目录</a>&l

电子商务网站设计分析:面包屑导航

AnyForWeb正式推出电子商务网站设计分析的系列文章,每月更新,本次主题为电商网站的面包屑导航设计,欢迎关注! 网站中的面包屑导航(Breadcrumb Navigation)导航是一种作为辅助和补充的导航方式,它能帮助用户明确当下所在的网站内位置,并快捷返回之前的路径. 面包屑的由来出自一个童话,两个孩子为了不在森林里迷路,于是沿途洒下了面包屑作为标记,帮助自己能够原路返回.通过这个故事我们可以看出,之所以被称为面包屑导航,正是因为它在网站中也起了相同的作用,让用户既能看清自己在网站中所处

从头带你认识面包屑导航的前世今生!

  面包屑导航,一个曾经风靡武林,不经意间已默默无闻的古老控件.很多交互设计师在刚听闻它大名的时候,它就隐退江湖了.不过,在某些类型的网站上,它还是必不可少的导航方式.今天美团网的交互设计师@德川亮 特意重新梳理资料,从头开始带你认识面包屑导航的前世今生. 什么是面包屑导航 网页上让用户感知当前页面所在的层级位置,或者是产品的属性之间的关系的控件.面包屑的一般样式是用链接文字加上">",横向排布 ,也有一些其他的样式. 这里用到了"感知",就是说面包屑导航不会

Bootstrap &lt;基础十八&gt;面包屑导航(Breadcrumbs)

原文:Bootstrap <基础十八>面包屑导航(Breadcrumbs) 面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表.分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加: .breadcrumb >

网站导航之 “面包屑”导航

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网站的导航栏在网站优化中占到非常高的比重,一个优秀的网站,浏览的主动权应该完全交给网民,由网民来决定浏览那些信息,跳过那些信息,必须保证让你的网站结构透明化,清晰化,简单化.清晰,系统的把网站结构简单化展现在网民面前.那么,要实现这个就不得不再次提起导航栏的重要性,一个简洁,准确,快捷的导航栏即可以引导Spider完整抓取你网站的每一个页面,