Explore Patterns
BreadCrumbsPresent the current user location in applications with a deep page hierarchy.
Usage
Usually placed above the page title. Define the separator icon, usually "angle_right", "caret_right" or "chevron_right". Place links for each level required to offer the navigation, with the exception of the last which would represent the current page. Leave empty the unrequired levels and these will not be rendered. In smartphones, only the last and previous to last labels are displayed.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
NavigationBarProvides links to other pages and displays the active page. Sometimes referred to as server-side tabs.
Usage
Add links to the only placeholder and they will transform to be presented as navigation. In tablets and smartphones, the items which do not fit will be presented in a dropdown.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
SectionIndexLists all Section patterns present in the page and allows the scroll to them on click. Current section highlights when scrolling.
Usage
Can be used with sections listed horizontally or vertically. Can be set as fixed to maintain position whilst user scrolls. If set as fixed, be sure to define the margin from the top. For a better user experience, in phones and tablets it displays horizontally and is not fixed on the screen.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
TabsUsed to display large sets of information which can be split into different areas, whilst always remaining a click away. The headers can have rich information like counters, badges or icons.
Usage
Fill in the headers and respective content areas of the tabs to be displayed. Empty tabs will not be rendered. Specify the initial active tab and also if the tabs should be loaded on user selection or on page load. Avoid using it in large forms.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
WizardUsed to split larger tasks into more manageable steps. Usually supported by explicit button navigation to move forward and backward.
Usage
Either use one of the Wizard patterns with pre-defined number of steps or use the generic Wizard and drag WizardStep's to its only placeholder. Inside each step, add a link to screen it should lead to. In smartphones, the wizard step labels are replaced with numbers.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
VISIT OUR FORUM
POST FEEDBACK
REPORT ISSUE
Silk UI Framework Simulation Device
Resize the window to preview the page in target devices.
Open the settings to change the simulation device options.
Click here to see your activities