When you have a list of items, you can use the umb-layout-selector directive to let users toggle between different layouts. For instance, in Umbraco's media archive, users can select between a grid-based layout (thumbnails) and a list-based layout (table).

The directive has three attributes:

  • layouts is used to indicate the available layouts that the user should be able to select.

  • active-layout is a reference to the layout currently being used.

  • on-layout-select is a callback function triggered when the user chooses another layout.

For a view utilizing this directive:

  • The HTML could look something like this:

    <div ng-controller="myController">
        <umb-layout-selector layouts="layouts"
  • You'd also need a controller for initializing the different values to be used for the directive:

    angular.module("umbraco").controller("myController", function ($scope) {
        // Declare the available layouts
        $scope.layouts = [
                name: "Grid",
                icon: "icon-thumbnails-small",
                path: "gridpath",
                selected : true
                name: "List",
                icon: "icon-list",
                path: "listpath",
                selected: true
        // Declare the function called by the directive when user chooses another layout
        $scope.selectLayout = function(layout) {
            $scope.activeLayout = layout;
            $scope.layouts.forEach(element => = false);
   = true;
        // Select the first layout

For each layout:

  • name property indicates the visual name of the layout (eg. used when hovering over the layout in the selector)

  • icon is the CSS selector for the icon of the layout.

  • path attribute indicates a sort of alias, and is used internally for comparing the layouts.

  • Each layout should also have a selected property indicating whether a particular layout is enabled, and thereby visible in the selector.

Last updated