• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Visio Guy

Smart graphics for visual people




  • Home
  • Hire Me
    • Hire Me
    • Résumé
  • Products
    • Products
    • Bubble Revision Shape
    • Layers to Pages Utility
    • Rack Unit Dimension Line
    • Radial Elements Tool with up to 100 Wedges
    • Text on a Circle Visio SmartShape
  • Index
    • Articles by Date
    • YouTube – VisioGuy
    • Download Information
    • Suggestion Box
    • Shop
    • Visio Art
    • Visio Links
    • – Visio Shapes & Stencils
    • – Visio Templates & Drawings
  • About
    • About
    • Donate
    • GitHub
    • jsFiddle
    • Reading List
    • Subscribe & Follow
      • – E-mail
      • – facebook
      • – Twitter
      • – RSS
    • Privacy Policy
  • Discussion Forum
You are here: Home / Visio Content / Shapes / Design Web Pages With This Visio Breadcrumbs Shape

Design Web Pages With This Visio Breadcrumbs Shape

February 3, 2009 By Visio Guy 6 Comments

breadcrumbs-visio-shape-thumb

I’ve seen much buzz lately regarding breadcrumb shapes in Visio.

Evidently a lot of folks are using Visio for IA and wireframes. Yup, you can lay-out and design web-sites with good ol’ Visio!

So I decided to create a Visio Breadcrumbs Shape to help web-site designers more quickly finish their prototypes. This shape incorporates some smart-behavior that should save you a lot of time!

Visio Breadcrumb Shape Features

The Visio Breadcrumbs Shape has a whole bevy of features that warrant explaining. The items fall into five categories:

  • Item text
  • Outline style of the breadcrumbs
  • Item width and sizing
  • Position
  • Margins

Below, we see four breadcrumb shapes, stacked on top of each other to contrast the different item outline styles. But the image also shows two ways to get at the features for configuring the shape.

You can get to most of the features by right-clicking the shape, but to get to all of them, use the Shape Data window. The Shape Data window can be toggled on and off from the main View menu.

item-outline-types

click to view larger image

Item Text

The most important feature of the shape is the text for each breadcrumb item, of course!

To specify the items in the breadcrumb shape, you enter a semi-colon list of items in the Items field. For our example here, I’ve just entered:

Kingdom;Phylum;Class;Order

The shape comes pre-configured with the items:

Item 1;Item 2;Item 3; Item 4

Four is the maximum number of breadcrumbs that the shape supports.

Outline Style

The shape has four outline styles: Box, Arrow, Divider, Divider-Arrow.

item-outline-types

click to view larger image

Box and Arrow draw completely around each segment, while Divder and Divider-Arrow only draw between the segments. You can see it more clearly in this close-up:

breadcrumb-outlines-close-up

Item and Sizing

The breadcrumbs shape has two styles of sizing, or Item Width:

  • Adjust-To-Text Spacing
  • Equal Spacing

If you select Adjust-To-Text Spacing, then you won’t be able to re-size the whole shape. This is because the items will automatically size to enclose the text. You don’t need to fuss with the width of the shape at all!

item-outline-adjust-to-text

With Equal Spacing, however, the item widths are all equal. If you have four items, then each item will be 1/4th the width of the shape. The shape is also freely resizable, so you can stretch it to be as wide as the page, for example:

item-outline-equal-spacing

Position

There are five options for setting the position of the breadcrumbs shape:

  • Freely Position
  • Anchor Top-Left
  • Anchor Top-Right
  • Anchor Bottom-Left
  • Anchor Bottom-Left

When you drop the shape on the page, it is set to Freely Position, which means that you can freely re-position it anywhere you want on the page.

But if you are designing a site with many pages, you might want to position similar shapes in exactly the same position on every page. If so, then select one of the Anchor options, and the shape will snap into position when you copy/paste it!

Here we see two breadcrumb shapes anchored top-left and bottom right. We can easily copy these shapes and paste them into other pages without having to worry about positioning them accurately. The shapes take care of that themselves, automatically!

breadcrumb-shape-positions

 

Here we can see several pages with the breadcrumb shapes aligned at the top-left of the page.

breadcrumb-postions-on-pages

click to view larger image

The shape was simply configured on Page-1 with the single item: “Home”. This shape was then copied and pasted to Page-2 and Page-3, and the items: “Level 1” and “Level1;Level2” were subsequently added.

Margins

If you are using the automatic positioning, you can specify the margins that effect where the shapes anchor:

  • Left Margin
  • Top Margin
  • Right Margin
  • Bottom Margin

Just enter a numeric value for the margins that you care about.

If you’ve gotten this far, then you know all the ins and outs of the Visio Breadcrumb Shape, so happy designing!

Information Architecture and Wireframe Links

If you’ve found this shape useful and exciting, check out our other related links and downloads!

Article: Pixel Unit Dimension Line Shape

Article: Lorem Ipsum – Visio IA Text Placeholder Shape

Category:Wireframes & IA

Download the Visio Breadcrumbs Shape

You can get the shape here:

Download “Visio Breadcrumbs Shape”

s!Aj0wJuswNyXlhj9iEQ2JRa-E9BDI – Downloaded 2284 times – 103.00 B

If you find this shape useful, but need an expanded feature-set, or other customizations, please feel free to contact me at:

and we can discuss a possible commission for further work.

Graphically Related

If you are looking for a shape that is similar to the breadcrumbs shape, but intended more for depicting processes in management presentations, be sure to check out: Automatic Chevron Process Shape.

  • Tweet
  • More
  • Pocket
  • Share on Tumblr
  • Print
  • Email

Related posts:

  1. Run Circles Around Your Text With the Circle-text Title SmartShape
  2. Repeating Diamond Title Visio Shape
  3. Lorem Ipsum – Visio IA Text Placeholder Shape
  4. User Experience Shapes From UserFocus
  5. No Flash Blue Lego Visio Shape

Filed Under: Shapes, Web Design, Wireframes & IA Tagged With: repeating shapes, SmartShapes, Web, Web Design

Previous Post: « Title Block #3: Smart Tabs, Smart Text
Next Post: Amazon Kindle 2 Visio Network Shape »

Reader Interactions

Comments

  1. jaysonelliot says

    September 8, 2010 at 7:24 pm

    Is it possible to edit this shape to support more than four items?

  2. dinerito fresco says

    May 14, 2014 at 9:50 pm

    En la Combinado de Europa 1973/1974 el Atlético de Madrid disputó
    la final contra el Bayern de Múnich. 18.

  3. Russ says

    November 19, 2014 at 6:46 pm

    This is pretty nifty & could save a bit of time, thought I have one question.

    How can I add links to each breadcrumb to head back to the appropriate page?

    Thanks, Russ.

Leave a Reply Cancel reply

Primary Sidebar

Buy Über Bubble Revision Shape
Purchase

Categories

Buy my book!

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Tag Cloud

A/V Artistic Effects BPM Code Connectors Control Handles Countries Custom Patterns Custom Properties Data Graphics Data Linking Data Visualization David Edson David Parker Fill Format Formulas Functions Geometry Gradient Images Links Maps Multi-shapes Network Programming repeating shapes Resources Right-Click Actions Scale Shape Data ShapeSheet ShapeSheet Formulas ShapeSheet Functions SharePoint shiny SmartShapes Sport Sports Text Themes Tools Transparency User-defined Cells Visio 2007 Visio SmartShapes

Top Posts & Pages

  • - Visio Shapes & Stencils
  • - Visio Templates & Drawings
  • Amazon AWS Visio Shapes
  • Dynamic Updating Org Charts in Visio!
  • Text on a Circle Visio Shape
  • Bubble Revision Shapes
  • Crayon Visio Network Shapes, Revisited
  • Map of World
  • Sankey Diagram Shapes for Visio
  • AV Engineering Diagrams with Symbol Logic ECAV

www.visguy.com - Visio Guy - since 2006

 

Loading Comments...