Digital pattern library

Breadcrumbs

The breadcrumbs pattern indicates the current page's location within a navigational hierarchy in relation to the website's homepage.

Rules for the breadcrumbs

Must not be used on any page that uses the hero banner pattern such as the University's homepage.
Must not be used on long-form pages.
Must be used at the top of content pages, sitting immediately beneath the navigation bar and above the page content.

Default breadcrumbs

Example

Code



    
        
            Breadcrumbs navigation
            
                
                        University
                        Study at St Andrews
                    Undergraduate

Breadcrumbs - old version

Attention

This implementation is now deprecated and will be removed in a future release.

This does not include the breadcrumbs--wrapper class which is required to add collapsible margins.

Example

Code



    
        
            Breadcrumbs navigation
            
                
                        University
                        Study at St Andrews
                    Undergraduate