feat(ui): apply react pageheader to all pageview EE-3615 (#7178)

Co-authored-by: Chaim Lev-Ari <chiptus@gmail.com>

app/azure/views/containerinstances/container-instance-details/containerInstanceDetails.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Container Instance"></rd-header-title>
-  <rd-header-content> <a ui-sref="azure.containerinstances">Container instances</a> &gt; {{ $ctrl.container.Name }} </rd-header-content>
-</rd-header>
+<page-header title="'Container Instance'" breadcrumbs="[{label:'Container instances', link:'azure.containerinstances'}, $ctrl.container.Name]"> </page-header>
 
 <div class="row" ng-if="!$ctrl.state.loading">
   <div class="col-sm-12">

app/azure/views/containerinstances/containerinstances.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Container list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="azure.containerinstances" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Container instances</rd-header-content>
-</rd-header>
+<page-header title="'Container list'" breadcrumbs="['Container instances']" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/components/host-overview/host-overview.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Host overview">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="{{ $ctrl.refreshUrl }}" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Docker</rd-header-content>
-</rd-header>
+<page-header title="'Host overview'" breadcrumbs="['Docker']" reload="true"> </page-header>
 
 <information-panel-offline ng-if="$ctrl.offlineMode"></information-panel-offline>
 

app/docker/views/configs/configs.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Configs list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.configs" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Configs</rd-header-content>
-</rd-header>
+<page-header title="'Configs list'" breadcrumbs="['Configs']" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/configs/create/createconfig.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create config"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.configs">Configs</a> &gt; Add config </rd-header-content>
-</rd-header>
+<page-header title="'Create config'" breadcrumbs="[{label:'Configs', link:'docker.configs'}, 'Add config']"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/configs/edit/config.html

@@ -1,13 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Config details">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.configs.config({id: config.Id})" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.configs">Configs</a> &gt; <a ui-sref="docker.configs.config({id: config.Id})">{{ config.Name }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Config details'" breadcrumbs="[{label:'Configs', link:'docker.configs'}, config.Name]" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/containers/console/attach.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Container console"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a> &gt; Console
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Container console'"
+  breadcrumbs="[
+    { label:'Containers', link:'docker.containers' },
+    { 
+      label:(container.Name | trimcontainername),
+      link: 'docker.containers.container', 
+      linkParams:container.Id
+    }, 'Console']"
+>
+</page-header>
 
 <div class="row" ng-init="autoconnectAttachView()" ng-show="loaded">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/containers/console/exec.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Container console"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a> &gt; Console
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Container console'"
+  breadcrumbs="[
+    { label:'Containers', link:'docker.containers' },
+    { 
+      label:(container.Name | trimcontainername),
+      link: 'docker.containers.container', 
+      linkParams:container.Id
+    }, 'Console']"
+>
+</page-header>
 
 <div class="row" ng-init="initView()" ng-show="loaded">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/containers/containers.html

@@ -1,11 +1,5 @@
-<rd-header>
-  <rd-header-title title-text="Container list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.containers" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Containers</rd-header-content>
-</rd-header>
+<page-header title="'Container list'" breadcrumbs="['Containers']" reload="true"> </page-header>
+
 <information-panel-offline ng-if="offlineMode"></information-panel-offline>
 
 <div class="row">

app/docker/views/containers/create/createcontainer.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create container"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.containers">Containers</a> &gt; Add container </rd-header-content>
-</rd-header>
+<page-header title="'Create container'" breadcrumbs="[{label:'Containers', link:'docker.containers'}, 'Add container']"> </page-header>
 
 <information-panel title-text="Caution" ng-if="state.mode == 'duplicate'">
   <span class="small">

app/docker/views/containers/edit/container.html

@@ -1,9 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Container details"> </rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Container details'" breadcrumbs="[{label:'Containers', link:'docker.containers'}, (container.Name | trimcontainername)]"> </page-header>
 
 <div
   class="row"

app/docker/views/containers/inspect/containerinspect.html

@@ -1,10 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Container inspect"> </rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: containerInfo.Id})">{{ containerInfo.Name | trimcontainername }}</a> &gt;
-    Inspect
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Container inspect'"
+  breadcrumbs="[
+    { label:'Containers', link:'docker.containers' },
+    { 
+      label:(containerInfo.Name | trimcontainername),
+      link: 'docker.containers.container', 
+      linkParams:containerInfo.Id
+    }, 'Inspect']"
+>
+</page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/containers/logs/containerlogs.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Container logs"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a> &gt; Logs
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Container logs'"
+  breadcrumbs="[
+    { label:'Containers', link:'docker.containers' },
+    { 
+      label:(container.Name | trimcontainername),
+      link: 'docker.containers.container', 
+      linkParams:container.Id
+    }, 'Logs']"
+>
+</page-header>
 
 <log-viewer
   data="logs"

app/docker/views/containers/stats/containerstats.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Container statistics"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a> &gt; Stats
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Container statistics'"
+  breadcrumbs="[
+    { label:'Containers', link:'docker.containers' },
+    { 
+      label:(container.Name | trimcontainername),
+      link: 'docker.containers.container', 
+      linkParams:container.Id
+    }, 'Stats']"
+>
+</page-header>
 
 <div class="row">
   <div class="col-md-12">

app/docker/views/docker-features-configuration/docker-features-configuration.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Docker features configuration"></rd-header-title>
-  <rd-header-content>Docker configuration</rd-header-content>
-</rd-header>
+<page-header title="'Docker features configuration'" breadcrumbs="['Docker configuration']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/events/events.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Event list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.events" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Events</rd-header-content>
-</rd-header>
+<page-header title="'Event list'" breadcrumbs="['Events']" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/host/host-browser-view/host-browser-view.html

@@ -1,9 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Host Browser"></rd-header-title>
-  <rd-header-content>
-    Host &gt; <a ui-sref="docker.host">{{ $ctrl.host.Name }}</a> &gt; browse
-  </rd-header-content>
-</rd-header>
+<page-header title="'Host Browser'" breadcrumbs="['Host', {label:$ctrl.host.Name, link:'docker.host'},  'browse']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/images/build/buildimage.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Build image"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.images">Images</a> &gt; Build image </rd-header-content>
-</rd-header>
+<page-header title="'Build image'" breadcrumbs="[{label:'Images', link:'docker.images'}, 'Build image']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/images/edit/image.html

@@ -1,9 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Image details"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.images">Images</a> &gt; <a ui-sref="docker.images.image({id: image.Id})">{{ image.Id }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Image details'" breadcrumbs="[{label:'Images', link:'docker.images'}, image.Id]"> </page-header>
 
 <div class="row" ng-if="image.RepoTags.length > 0">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/images/images.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Image list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.images" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Images</rd-header-content>
-</rd-header>
+<page-header title="'Image list'" breadcrumbs="['Images']" reload="true"> </page-header>
 
 <div class="row" ng-if="!offlineMode" authorization="DockerImageCreate">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/images/import/importimage.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Import image"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.images">Images</a> &gt; Import image </rd-header-content>
-</rd-header>
+<page-header title="'Import image'" breadcrumbs="[{label:'Images', link:'docker.images'}, 'Import image']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/networks/create/createnetwork.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create network"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.networks">Networks</a> &gt; Add network </rd-header-content>
-</rd-header>
+<page-header title="'Create network'" breadcrumbs="[{label:'Networks', link:'docker.networks'}, 'Add network']"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/networks/networks.html

@@ -1,11 +1,5 @@
-<rd-header>
-  <rd-header-title title-text="Network list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.networks" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Networks</rd-header-content>
-</rd-header>
+<page-header title="'Network list'" breadcrumbs="['Networks']" reload="true"> </page-header>
+
 <information-panel-offline ng-if="offlineMode"></information-panel-offline>
 <div class="row">
   <div class="col-sm-12">

app/docker/views/nodes/node-browser/node-browser.html

@@ -1,9 +1,19 @@
-<rd-header>
-  <rd-header-title title-text="Node Browser"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.swarm">Swarm</a> &gt; <a ui-sref="docker.nodes.node({ id: $ctrl.nodeId })">{{ $ctrl.node.Hostname }}</a> &gt; browse
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Node Browser'"
+  breadcrumbs="[
+    {
+      label:'swarm',
+      link:'docker.swarm'
+    },
+    {
+      label: $ctrl.node.Hostname,
+      link: 'docker.nodes.node',
+      linkParams: { id: $ctrl.nodeId }
+    },
+    'browse'
+  ]"
+>
+</page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/registries/access/registryAccess.html

@@ -1,16 +1,15 @@
-<rd-header>
-  <rd-header-title title-text="Registry access"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.registries">Registries</a> &gt; {{ $ctrl.registry.Name }} &gt; Access management </rd-header-content>
-</rd-header>
+<div ng-if="$ctrl.registry">
+  <page-header title="'Registry access'" breadcrumbs="[{label:'Registries', link:'docker.registries'}, $ctrl.registry.Name, 'Access management']"> </page-header>
 
-<registry-details registry="$ctrl.registry" ng-if="$ctrl.registry"></registry-details>
+  <registry-details registry="$ctrl.registry"></registry-details>
 
-<por-access-management
-  ng-if="$ctrl.registry && $ctrl.endpointGroup"
-  access-controlled-entity="$ctrl.registryEndpointAccesses"
-  entity-type="registry"
-  action-in-progress="$ctrl.state.actionInProgress"
-  update-access="$ctrl.updateAccess"
-  filter-users="$ctrl.filterUsers"
->
-</por-access-management>
+  <por-access-management
+    ng-if="$ctrl.endpointGroup"
+    access-controlled-entity="$ctrl.registryEndpointAccesses"
+    entity-type="registry"
+    action-in-progress="$ctrl.state.actionInProgress"
+    update-access="$ctrl.updateAccess"
+    filter-users="$ctrl.filterUsers"
+  >
+  </por-access-management>
+</div>

app/docker/views/secrets/create/createsecret.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create secret"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.secrets">Secrets</a> &gt; Add secret </rd-header-content>
-</rd-header>
+<page-header title="'Create secret'" breadcrumbs="[{label:'Secrets', link:'docker.secrets'}, 'Add secret']"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/secrets/edit/secret.html

@@ -1,13 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Secret details">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.secrets.secret({id: secret.Id})" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.secrets">Secrets</a> &gt; <a ui-sref="docker.secrets.secret({id: secret.Id})">{{ secret.Name }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Secret details'" breadcrumbs="[{label:'Secrets', link:'docker.secrets', linkParams:{ id: secret.Id }}, secret.Name]" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/secrets/secrets.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Secrets list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.secrets" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Secrets</rd-header-content>
-</rd-header>
+<page-header title="'Secrets list'" breadcrumbs="['Secrets']" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/services/create/createservice.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create service"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.services">Services</a> &gt; Add service </rd-header-content>
-</rd-header>
+<page-header title="'Create service'" breadcrumbs="[{label:'Services', link:'docker.services'}, 'Add service']"> </page-header>
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/services/edit/service.html

@@ -1,13 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Service details">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.services.service({id: service.Id})" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.services">Services</a> &gt; <a ui-sref="docker.services.service({id: service.Id})">{{ service.Name }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Service details'" breadcrumbs="[{label:'Services', link:'docker.services'}, service.Name]" reload="true"> </page-header>
 
 <div class="row">
   <div ng-if="isUpdating" class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/services/logs/servicelogs.html

@@ -1,9 +1,19 @@
-<rd-header>
-  <rd-header-title title-text="Service logs"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.services">Services</a> > <a ui-sref="docker.services.service({id: service.Id})">{{ service.Name }}</a> &gt; Logs
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Service logs'"
+  breadcrumbs="[
+    {
+      label: 'Services',
+      link: 'docker.services'
+    },
+    {
+      label: service.Name,
+      link: 'docker.services.service',
+      linkParams: { id: service.Id }
+    },
+    'Logs'
+  ]"
+>
+</page-header>
 
 <log-viewer
   data="logs"

app/docker/views/services/services.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Service list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.services" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Services</rd-header-content>
-</rd-header>
+<page-header title="'Service list'" breadcrumbs="['Services']" reload="true"> </page-header>
 
 <div class="row" ng-if="services">
   <div class="col-sm-12">

app/docker/views/swarm/swarm.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Cluster overview">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.swarm" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Swarm</rd-header-content>
-</rd-header>
+<page-header title="'Cluster overview'" breadcrumbs="['Swarm']" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/swarm/visualizer/swarmvisualizer.html

@@ -1,11 +1,5 @@
-<rd-header>
-  <rd-header-title title-text="Swarm visualizer">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.swarm.visualizer" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content> <a ui-sref="docker.swarm">Swarm</a> &gt; <a ui-sref="docker.swarm.visualizer">Cluster visualizer</a> </rd-header-content>
-</rd-header>
+<page-header title="'Swarm visualizer'" breadcrumbs="[{label:'Swarm', link:'docker.swarm'}, {label:'Cluster visualizer', link:'docker.swarm.visualizer'}]" reload="true">
+</page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/tasks/edit/task.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Task details"></rd-header-title>
-  <rd-header-content ng-if="task && service">
-    <a ui-sref="docker.services">Services</a> &gt; <a ui-sref="docker.services.service({id: service.Id })">{{ service.Name }}</a> &gt; {{ task.Id }}
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Task details'"
+  breadcrumbs="[
+    { label:'Services', link:'docker.services' },
+    { 
+      label: service.Name,
+      link: 'docker.services.service', 
+      linkParams:{ id: service.Id }
+    }, task.Id]"
+>
+</page-header>
 
 <div class="row" ng-if="task && service">
   <div class="col-lg-12 col-md-12 col-xs-12">

app/docker/views/tasks/logs/tasklogs.html

@@ -1,10 +1,20 @@
-<rd-header>
-  <rd-header-title title-text="Task details"></rd-header-title>
-  <rd-header-content ng-if="task && service">
-    <a ui-sref="docker.services">Services</a> &gt; <a ui-sref="docker.services.service({id: service.Id })">{{ service.Name }}</a> &gt;
-    <a ui-sref="docker.tasks.task({id: task.Id })">{{ task.Id }}</a> &gt; Logs
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Task details'"
+  breadcrumbs="[
+    { label:'Services', link:'docker.services' },
+    { 
+      label:service.Name,
+      link:'docker.services.service', 
+      linkParams:{ id: service.Id }
+    }, 
+    { 
+      label:task.Id,
+      link:'docker.tasks.task', 
+      linkParams:{ id: task.Id }
+    },
+    'Logs']"
+>
+</page-header>
 
 <log-viewer
   data="logs"

app/docker/views/volumes/browse/browsevolume.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Volume browser"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.volumes">Volumes</a> &gt; <a ui-sref="docker.volumes.volume({ id: volumeId })">{{ volumeId }}</a> &gt; browse
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Volume browser'"
+  breadcrumbs="[
+    { label:'Volumes', link:'docker.volumes' },
+    { 
+      label:volumeId,
+      link: 'docker.volumes.volume', 
+      linkParams:{ id: volumeId }
+    }, 'browse']"
+>
+</page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/volumes/create/createvolume.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create volume"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.volumes">Volumes</a> &gt; Add volume </rd-header-content>
-</rd-header>
+<page-header title="'Create volume'" breadcrumbs="[{label:'Volumes', link:'docker.volumes'}, 'Add volume']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/docker/views/volumes/edit/volume.html

@@ -1,9 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Volume details"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="docker.volumes">Volumes</a> &gt; <a ui-sref="docker.volumes.volume({id: volume.Id})">{{ volume.Id }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Volume details'" breadcrumbs="[{label:'Volumes', link:'docker.volumes'}, volume.Id]"> </page-header>
 
 <div class="row" ng-if="volume">
   <div class="col-sm-12">

app/docker/views/volumes/volumes.html

@@ -1,11 +1,5 @@
-<rd-header>
-  <rd-header-title title-text="Volume list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.volumes" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Volumes</rd-header-content>
-</rd-header>
+<page-header title="'Volume list'" breadcrumbs="['Volumes']" reload="true"> </page-header>
+
 <information-panel-offline ng-if="offlineMode"></information-panel-offline>
 <div class="row">
   <div class="col-sm-12">

app/edge/views/edge-groups/createEdgeGroupView/createEdgeGroupView.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create edge group"></rd-header-title>
-  <rd-header-content> <a ui-sref="edge.groups">Edge groups</a> &gt; Add edge group </rd-header-content>
-</rd-header>
+<page-header title="'Create edge group'" breadcrumbs="[{label:'Edge groups', link:'edge.groups'}, 'Add edge group']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/edge/views/edge-groups/edgeGroupsView/edgeGroupsView.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Edge Groups">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="edge.groups" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Edge Groups</rd-header-content>
-</rd-header>
+<page-header title="'Edge Groups'" breadcrumbs="['Edge Groups']" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/edge/views/edge-groups/editEdgeGroupView/editEdgeGroupView.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Edit edge group"></rd-header-title>
-  <rd-header-content> <a ui-sref="edge.groups">Edge Groups</a> &gt; {{ $ctrl.model.Name }} </rd-header-content>
-</rd-header>
+<page-header title="'Edit edge group'" breadcrumbs="[{label:'Edge Groups', link:'edge.groups'}, $ctrl.model.Name]"> </page-header>
 
 <div class="row" ng-if="$ctrl.model">
   <div class="col-sm-12">

app/edge/views/edge-jobs/createEdgeJobView/createEdgeJobView.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create Edge job"></rd-header-title>
-  <rd-header-content> <a ui-sref="edge.jobs">Edge Jobs</a> &gt; Create Edge job </rd-header-content>
-</rd-header>
+<page-header title="'Create Edge job'" breadcrumbs="[{label:'Edge Jobs', link:'edge.jobs'}, 'Create Edge job']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/edge/views/edge-jobs/edgeJob/edgeJob.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Edge job details">
-    <a data-toggle="tooltip" title-text="Refresh" ui-sref="edge.jobs.job({id: $ctrl.edgeJob.Id, tab: $ctrl.state.activeTab})" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content> <a ui-sref="edge.jobs">Edge jobs</a> &gt; {{ ::$ctrl.edgeJob.Name }} </rd-header-content>
-</rd-header>
+<page-header title="'Edge job details'" breadcrumbs="[{label:'Edge jobs', link:'edge.jobs'}, $ctrl.edgeJob.Name]" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/edge/views/edge-jobs/edgeJobsView/edgeJobsView.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Edge Jobs">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="edge.jobs" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Edge Jobs</rd-header-content>
-</rd-header>
+<page-header title="'Edge Jobs'" breadcrumbs="['Edge Jobs']" reload="true"> </page-header>
 
 <information-panel title-text="Information">
   <span class="small">

app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create Edge stack"></rd-header-title>
-  <rd-header-content> <a ui-sref="edge.stacks">Edge Stacks</a> &gt; Create Edge stack </rd-header-content>
-</rd-header>
+<page-header title="'Create Edge stack'" breadcrumbs="[{label:'Edge Stacks', link:'edge.stacks'}, 'Create Edge stack']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/edge/views/edge-stacks/edgeStacksView/edgeStacksView.html

@@ -1,11 +1,5 @@
-<rd-header>
-  <rd-header-title title-text="Edge Stacks list">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="edge.stacks" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Edge Stacks</rd-header-content>
-</rd-header>
+<page-header title="'Edge Stacks list'" breadcrumbs="['Edge Stacks']" reload="true"> </page-header>
+
 <div class="row">
   <div class="col-sm-12">
     <edge-stacks-datatable

app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackView.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Edit Edge stack">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="edge.stacks.edit({stackId:$ctrl.stack.Id, tab: $ctrl.state.activeTab})" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content> <a ui-sref="edge.stacks">Edge Stacks</a> &gt; {{ $ctrl.stack.Name }} </rd-header-content>
-</rd-header>
+<page-header title="'Edit Edge stack'" breadcrumbs="[{label:'Edge Stacks', link:'edge.stacks'}, $ctrl.stack.Name]" reload="true"> </page-header>
 
 <div class="row" ng-if="$ctrl.stack">
   <div class="col-sm-12">

app/kubernetes/components/helm/helm-templates/helm-templates.html

@@ -1,4 +1,4 @@
-<kubernetes-view-header id="view-top" title="Helm" state="kubernetes.templates.helm" view-ready="true"> Charts </kubernetes-view-header>
+<page-header title="'Helm'" breadcrumbs="['Charts']" reload="true"></page-header>
 
 <information-panel title-text="Information" ng-if="!$ctrl.state.chart">
   <span class="small text-muted">

app/kubernetes/components/view-header/viewHeader.html

@@ -1,10 +0,0 @@
-<rd-header ng-if="$ctrl.viewReady">
-  <rd-header-title title-text="{{ $ctrl.title }}">
-    <a data-toggle="tooltip" title="refresh the view" ui-sref="{{ $ctrl.state }}" ui-sref-opts="{reload: $ctrl.state}" ng-if="$ctrl.viewReady">
-      <i class="fa fa-sm fa-sync" aria-hidden="true" data-cy="component-refreshTableButton"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>
-    <ng-transclude></ng-transclude>
-  </rd-header-content>
-</rd-header>

app/kubernetes/components/view-header/viewHeader.js

@@ -1,9 +0,0 @@
-angular.module('portainer.kubernetes').component('kubernetesViewHeader', {
-  templateUrl: './viewHeader.html',
-  transclude: true,
-  bindings: {
-    viewReady: '<',
-    title: '@',
-    state: '@',
-  },
-});

app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create Custom template"></rd-header-title>
-  <rd-header-content> <a ui-sref="kubernetes.templates.custom">Custom Templates</a> &gt; Create Custom template </rd-header-content>
-</rd-header>
+<page-header title="'Create Custom template'" breadcrumbs="[{label:'Custom Templates', link:'kubernetes.templates.custom'}, 'Create Custom template']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.html

@@ -1,4 +1,4 @@
-<kubernetes-view-header title="Custom Templates" state="kubernetes.templates.custom" view-ready="true"> Custom Templates </kubernetes-view-header>
+<page-header title="'Custom Templates'" breadcrumbs="['Custom Templates']" reload="true"></page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Edit Custom Template">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="kubernetes.templates.custom.edit({id:$ctrl.formValues.Id})" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content> <a ui-sref="kubernetes.templates.custom">Custom templates</a> &gt; {{ $ctrl.formValues.Title }} </rd-header-content>
-</rd-header>
+<page-header title="'Edit Custom Template'" breadcrumbs="[{label:'Custom templates', link:'kubernetes.templates.custom'}, $ctrl.formValues.Title]" reload="true"> </page-header>
 
 <div class="row" ng-if="$ctrl.formValues">
   <div class="col-sm-12">

app/kubernetes/registries/kube-registry-access-view/kube-registry-access-view.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Registry access"></rd-header-title>
-  <rd-header-content> <a ui-sref="kubernetes.registries">Registries</a> &gt; {{ $ctrl.registry.Name }} &gt; Access management </rd-header-content>
-</rd-header>
+<page-header title="'Registry access'" breadcrumbs="[{label:'Registries', link:'kubernetes.registries'}, $ctrl.registry.Name, 'Access management']"> </page-header>
 
 <registry-details registry="$ctrl.registry" ng-if="$ctrl.registry"></registry-details>
 

app/kubernetes/views/applications/applications.html

@@ -1,4 +1,4 @@
-<kubernetes-view-header title="Application list" state="kubernetes.applications" view-ready="ctrl.state.viewReady"> Applications </kubernetes-view-header>
+<page-header ng-if="ctrl.state.viewReady" title="'Application list'" breadcrumbs="['Applications']" reload="true"></page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/applications/console/console.html

@@ -1,10 +1,28 @@
-<kubernetes-view-header title="Application console" state="kubernetes.applications.application.console" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.resourcePools">Namespaces</a> &gt;
-  <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.application.ResourcePool })">{{ ctrl.application.ResourcePool }}</a> &gt;
-  <a ui-sref="kubernetes.applications">Applications</a> &gt;
-  <a ui-sref="kubernetes.applications.application({ name: ctrl.application.Name, namespace: ctrl.application.ResourcePool })">{{ ctrl.application.Name }}</a> &gt; Pods &gt;
-  {{ ctrl.podName }} &gt; Containers &gt; {{ ctrl.containerName }} &gt; Console
-</kubernetes-view-header>
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Application console'"
+  breadcrumbs="[
+    { label:'Namespaces', link:'kubernetes.resourcePools' },
+    { 
+      label:ctrl.application.ResourcePool,
+      link: 'kubernetes.resourcePools.resourcePool', 
+      linkParams:{ id: ctrl.application.ResourcePool }
+    },
+    { label:'Applications', link:'kubernetes.applications' },
+    { 
+      label:ctrl.application.Name,
+      link: 'kubernetes.applications.application', 
+      linkParams:{ name: ctrl.application.Name, namespace: ctrl.application.ResourcePool }
+    },
+     'Pods',
+     ctrl.podName,
+     'Containers',
+     ctrl.containerName,
+     'Console'
+     ]"
+  reload="true"
+>
+</page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/applications/create/createApplication.html

@@ -1,12 +1,35 @@
-<kubernetes-view-header ng-if="!ctrl.state.isEdit" title="Create application" state="kubernetes.applications.new" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.applications">Applications</a> &gt; Create an application
-</kubernetes-view-header>
-<kubernetes-view-header ng-if="ctrl.state.isEdit" title="Edit application" state="kubernetes.applications.application.edit" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.resourcePools">Namespaces</a> &gt;
-  <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.application.ResourcePool })">{{ ctrl.application.ResourcePool }}</a> &gt;
-  <a ui-sref="kubernetes.applications">Applications</a> &gt;
-  <a ui-sref="kubernetes.applications.application({ name: ctrl.application.Name, namespace: ctrl.application.ResourcePool })">{{ ctrl.application.Name }}</a> &gt; Edit
-</kubernetes-view-header>
+<page-header
+  ng-if="!ctrl.state.isEdit"
+  title="'Create application'"
+  breadcrumbs="[
+    { label:'Applications', link:'kubernetes.applications' },
+     'Create an application'
+     ]"
+  reload="true"
+>
+</page-header>
+
+<page-header
+  ng-if="ctrl.state.isEdit"
+  title="'Edit application'"
+  breadcrumbs="[
+    { label:'Namespaces', link:'kubernetes.resourcePools' },
+    { 
+      label:ctrl.application.ResourcePool,
+      link: 'kubernetes.resourcePools.resourcePool', 
+      linkParams:{ id: ctrl.application.ResourcePool }
+    },
+    { label:'Applications', link:'kubernetes.applications' },
+    { 
+      label:ctrl.application.Name,
+      link: 'kubernetes.applications.application', 
+      linkParams:{ name: ctrl.application.Name, namespace: ctrl.application.ResourcePool }
+    },
+     'Edit',
+     ]"
+  reload="true"
+>
+</page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 <div ng-if="ctrl.state.viewReady">

app/kubernetes/views/applications/edit/application.html

@@ -1,8 +1,19 @@
-<kubernetes-view-header title="Application details" state="kubernetes.applications.application" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.resourcePools">Namespaces</a> &gt;
-  <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.application.ResourcePool })">{{ ctrl.application.ResourcePool }}</a> &gt;
-  <a ui-sref="kubernetes.applications">Applications</a> &gt; {{ ctrl.application.Name }}
-</kubernetes-view-header>
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Application details'"
+  breadcrumbs="[
+    { label:'Namespaces', link:'kubernetes.resourcePools' },
+    { 
+      label:ctrl.application.ResourcePool,
+      link: 'kubernetes.resourcePools.resourcePool', 
+      linkParams:{ id: ctrl.application.ResourcePool }
+    },
+    { label:'Applications', link:'kubernetes.applications' },
+    ctrl.application.Name
+     ]"
+  reload="true"
+>
+</page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/applications/helm/helm.html

@@ -1,6 +1,9 @@
-<kubernetes-view-header title="Helm details" state="kubernetes.helm" view-ready="$ctrl.state.viewReady">
-  <a ui-sref="kubernetes.applications">Applications</a> &gt; {{ $ctrl.state.params.name }}
-</kubernetes-view-header>
+<page-header
+  ng-if="$ctrl.state.viewReady"
+  title="'Helm details'"
+  breadcrumbs="[{label:'Applications', link:'kubernetes.applications'}, $ctrl.state.params.name]"
+  reload="true"
+></page-header>
 
 <kubernetes-view-loading view-ready="$ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/applications/logs/logs.html

@@ -1,10 +1,28 @@
-<kubernetes-view-header title="Application logs" state="kubernetes.applications.application.logs" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.resourcePools">Namespaces</a> &gt;
-  <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.application.ResourcePool })">{{ ctrl.application.ResourcePool }}</a> &gt;
-  <a ui-sref="kubernetes.applications">Applications</a> &gt;
-  <a ui-sref="kubernetes.applications.application({ name: ctrl.application.Name, namespace: ctrl.application.ResourcePool })">{{ ctrl.application.Name }}</a> &gt; Pods &gt;
-  {{ ctrl.podName }} &gt; Containers &gt; {{ ctrl.containerName }} &gt; Logs
-</kubernetes-view-header>
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Application logs'"
+  breadcrumbs="[
+    { label:'Namespaces', link:'kubernetes.resourcePools' },
+    { 
+      label:ctrl.application.ResourcePool,
+      link: 'kubernetes.resourcePools.resourcePool', 
+      linkParams:{ id: ctrl.application.ResourcePool }
+    },
+    { label:'Applications', link:'kubernetes.applications' },
+    { 
+      label:ctrl.application.Name,
+      link: 'kubernetes.applications.application', 
+      linkParams:{ name: ctrl.application.Name, namespace: ctrl.application.ResourcePool }
+    },
+     'Pods',
+     ctrl.podName,
+     'Containers',
+     ctrl.containerName,
+     'Logs'
+     ]"
+  reload="true"
+>
+</page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/applications/stats/stats.html

@@ -1,12 +1,28 @@
-<kubernetes-view-header title="Application stats" state="kubernetes.applications.application.stats" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.resourcePools">Namespaces</a> &gt;
-  <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.state.transition.namespace })">{{ ctrl.state.transition.namespace }}</a> &gt;
-  <a ui-sref="kubernetes.applications">Applications</a> &gt;
-  <a ui-sref="kubernetes.applications.application({ name: ctrl.state.transition.applicationName, namespace: ctrl.state.transition.namespace })">{{
-    ctrl.state.transition.applicationName
-  }}</a>
-  &gt; Pods &gt; {{ ctrl.state.transition.podName }} &gt; Containers &gt; {{ ctrl.state.transition.containerName }} &gt; Stats
-</kubernetes-view-header>
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Application stats'"
+  breadcrumbs="[
+    { label:'Namespaces', link:'kubernetes.resourcePools' },
+    { 
+      label:ctrl.state.transition.namespace,
+      link: 'kubernetes.resourcePools.resourcePool', 
+      linkParams:{ id: ctrl.state.transition.namespace }
+    },
+    { label:'Applications', link:'kubernetes.applications' },
+    { 
+      label:ctrl.state.transition.applicationName,
+      link: 'kubernetes.applications.application', 
+      linkParams:{ name: ctrl.state.transition.applicationName, namespace: ctrl.state.transition.namespace }
+    },
+     'Pods',
+     ctrl.state.transition.podName,
+     'Containers',
+     ctrl.state.transition.containerName,
+     'Stats'
+     ]"
+  reload="true"
+>
+</page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/cluster/cluster.html

@@ -1,4 +1,4 @@
-<kubernetes-view-header title="Cluster" state="kubernetes.cluster" view-ready="ctrl.state.viewReady"> Cluster information </kubernetes-view-header>
+<page-header ng-if="ctrl.state.viewReady" title="'Cluster'" breadcrumbs="['Cluster information']" reload="true"></page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/cluster/node/node.html

@@ -1,6 +1,4 @@
-<kubernetes-view-header title="Node details" state="kubernetes.cluster.node" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.cluster">Cluster</a> &gt; {{ ctrl.node.Name }}
-</kubernetes-view-header>
+<page-header ng-if="ctrl.state.viewReady" title="'Node details'" breadcrumbs="[{ label:'Cluster', link:'kubernetes.cluster' }, ctrl.node.Name]" reload="true"></page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/cluster/node/stats/stats.html

@@ -1,7 +1,17 @@
-<kubernetes-view-header title="Node stats" state="kubernetes.cluster.node.stats" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.cluster">Cluster</a> &gt; <a ui-sref="kubernetes.cluster.node({name: ctrl.state.transition.nodeName})"> {{ ctrl.state.transition.nodeName }} </a> >
-  {{ ctrl.state.transition.nodeName }}
-</kubernetes-view-header>
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Node stats'"
+  breadcrumbs="[
+{ label:'Cluster', link:'kubernetes.cluster' },
+{ 
+  label:ctrl.state.transition.nodeName,
+  link: 'kubernetes.cluster.node', 
+  linkParams:{name: ctrl.state.transition.nodeName}
+},
+ ctrl.state.transition.nodeName,
+ ]"
+  reload="true"
+></page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/configurations/configurations.html

@@ -1,4 +1,4 @@
-<kubernetes-view-header title="ConfigMaps & Secrets list" state="kubernetes.configurations" view-ready="ctrl.state.viewReady"> ConfigMaps & Secrets </kubernetes-view-header>
+<page-header ng-if="ctrl.state.viewReady" title="'ConfigMaps & Secrets list'" breadcrumbs="['ConfigMaps & Secrets']" reload="true"></page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/configurations/create/createConfiguration.html

@@ -1,6 +1,9 @@
-<kubernetes-view-header title="Create configuration" state="kubernetes.configurations.new" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.configurations">ConfigMaps and Secrets</a> &gt; Create a configuration
-</kubernetes-view-header>
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Create configuration'"
+  breadcrumbs="[{ label:'ConfigMaps and Secrets', link:'kubernetes.configurations' }, 'Create a configuration']"
+  reload="true"
+></page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/configurations/edit/configuration.html

@@ -1,8 +1,19 @@
-<kubernetes-view-header title="Configuration details" state="kubernetes.configurations.configuration" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.resourcePools">Namespaces</a> &gt;
-  <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.configuration.Namespace })">{{ ctrl.configuration.Namespace }}</a> &gt;
-  <a ui-sref="kubernetes.configurations">ConfigMaps and Secrets</a> &gt; {{ ctrl.configuration.Name }}
-</kubernetes-view-header>
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Configuration details'"
+  breadcrumbs="[
+    { label:'Namespaces', link:'kubernetes.resourcePools' },
+    { 
+      label:ctrl.configuration.Namespace,
+      link: 'kubernetes.resourcePools.resourcePool', 
+      linkParams:{ id: ctrl.configuration.Namespace }
+    },
+    { label:'ConfigMaps and Secrets', link:'kubernetes.configurations' },
+    ctrl.configuration.Name,
+     ]"
+  reload="true"
+>
+</page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/configure/configure.html

@@ -1,6 +1,18 @@
-<kubernetes-view-header title="Kubernetes features configuration" state="portainer.k8sendpoint.kubernetesConfig" view-ready="ctrl.state.viewReady">
-  <a ui-sref="portainer.endpoints">Environment</a> &gt; <a ui-sref="portainer.endpoints.endpoint({id: ctrl.endpoint.Id})">{{ ctrl.endpoint.Name }}</a> &gt; Kubernetes configuration
-</kubernetes-view-header>
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Kubernetes features configuration'"
+  breadcrumbs="[
+    { label:'Environments', link:'portainer.endpoints' },
+    { 
+      label:ctrl.endpoint.Name,
+      link: 'portainer.endpoints.endpoint', 
+      linkParams:{id: ctrl.endpoint.Id}
+    },
+     'Kubernetes configuration'
+     ]"
+  reload="true"
+>
+</page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/dashboard/dashboard.html

@@ -1,4 +1,4 @@
-<kubernetes-view-header title="Dashboard" state="kubernetes.dashboard" view-ready="ctrl.state.viewReady"> Environment summary </kubernetes-view-header>
+<page-header ng-if="ctrl.state.viewReady" title="'Dashboard'" breadcrumbs="['Environment summary']" reload="true"></page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/deploy/deploy.html

@@ -1,4 +1,4 @@
-<kubernetes-view-header title="Advanced deployment" state="kubernetes.deploy" view-ready="ctrl.state.viewReady"> Deploy Kubernetes resources </kubernetes-view-header>
+<page-header ng-if="ctrl.state.viewReady" title="'Advanced deployment'" breadcrumbs="['Deploy Kubernetes resources']" reload="true"></page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/resource-pools/access/resourcePoolAccess.html

@@ -1,7 +1,18 @@
-<kubernetes-view-header title="Namespace access management" state="kubernetes.resourcePools.resourcePool.access" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.resourcePools">Namespaces</a> &gt;
-  <a ui-sref="kubernetes.resourcePools.resourcePool({id: ctrl.pool.Namespace.Name})">{{ ctrl.pool.Namespace.Name }}</a> &gt; Access management
-</kubernetes-view-header>
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Namespace access management'"
+  breadcrumbs="[
+    { label:'Namespaces', link:'kubernetes.resourcePools' },
+    { 
+      label:ctrl.pool.Namespace.Name,
+      link: 'kubernetes.resourcePools.resourcePool', 
+      linkParams:{id: ctrl.pool.Namespace.Name}
+    },
+     'Access management'
+     ]"
+  reload="true"
+>
+</page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/resource-pools/create/createResourcePool.html

@@ -1,6 +1,9 @@
-<kubernetes-view-header title="Create a namespace" state="kubernetes.resourcePools.new" view-ready="$ctrl.state.viewReady">
-  <a ui-sref="kubernetes.resourcePools">Namespaces</a> &gt; Create a namespace
-</kubernetes-view-header>
+<page-header
+  ng-if="$ctrl.state.viewReady"
+  title="'Create a namespace'"
+  breadcrumbs="[{ label:'Namespaces', link:'kubernetes.resourcePools' }, 'Create a namespace']"
+  reload="true"
+></page-header>
 
 <kubernetes-view-loading view-ready="$ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/resource-pools/edit/resourcePool.html

@@ -1,6 +1,9 @@
-<kubernetes-view-header title="Namespace details" state="kubernetes.resourcePools.resourcePool" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.resourcePools">Namespaces</a> &gt; {{ ctrl.pool.Namespace.Name }}
-</kubernetes-view-header>
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Namespace details'"
+  breadcrumbs="[{ label:'Namespaces', link:'kubernetes.resourcePools' }, ctrl.pool.Namespace.Name]"
+  reload="true"
+></page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/resource-pools/resourcePools.html

@@ -1,4 +1,4 @@
-<kubernetes-view-header title="Namespace list" state="kubernetes.resourcePools" view-ready="ctrl.state.viewReady"> Namespaces </kubernetes-view-header>
+<page-header ng-if="ctrl.state.viewReady" title="'Namespace list'" breadcrumbs="['Namespaces']" reload="true"></page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/security-constraint/constraint.html

@@ -1,6 +1,13 @@
-<kubernetes-view-header title="Kubernetes security constraints" state="portainer.k8sendpoint.securityConstraint" view-ready="state.viewReady">
-  <a ui-sref="portainer.endpoints">Environments</a> &gt; <a ui-sref="portainer.endpoints.endpoint({id: endpoint.Id})">{{ endpoint.Name }}</a> &gt; Security constraints
-</kubernetes-view-header>
+<page-header
+  ng-if="state.viewReady"
+  title="'Kubernetes security constraints'"
+  breadcrumbs="[
+{ label:'Environments', link:'portainer.endpoints' }, 
+{ label:endpoint.Name, link:'portainer.endpoints.endpoint', linkParams:{id: endpoint.Id} }, 
+'Security constraints'
+]"
+  reload="true"
+></page-header>
 
 <kubernetes-view-loading view-ready="state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/stacks/logs/logs.html

@@ -1,8 +1,16 @@
-<kubernetes-view-header title="Stacks logs" state="kubernetes.stacks.stack.logs" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.resourcePools">Namespaces</a>
-  &gt; <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.state.transition.namespace })">{{ ctrl.state.transition.namespace }}</a> &gt;
-  <a ui-sref="kubernetes.applications">Applications</a> &gt; Stacks &gt; {{ ctrl.state.transition.name }} &gt; Logs
-</kubernetes-view-header>
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Stacks logs'"
+  breadcrumbs="[
+{ label:'Namespaces', link:'kubernetes.resourcePools' }, 
+{ label:ctrl.state.transition.namespace, link:'kubernetes.resourcePools.resourcePool', linkParams:{ id: ctrl.state.transition.namespace } }, 
+{ label:'Applications', link:'kubernetes.applications' },
+'Stacks',
+ctrl.state.transition.name,
+'Logs'
+]"
+  reload="true"
+></page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/volumes/edit/volume.html

@@ -1,8 +1,19 @@
-<kubernetes-view-header title="Volume details" state="kubernetes.volumes.volume" view-ready="ctrl.state.viewReady">
-  <a ui-sref="kubernetes.resourcePools">Namespaces</a> &gt;
-  <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.volume.ResourcePool.Namespace.Name })">{{ ctrl.volume.ResourcePool.Namespace.Name }}</a> &gt;
-  <a ui-sref="kubernetes.volumes">Volumes</a> &gt; {{ ctrl.volume.PersistentVolumeClaim.Name }}
-</kubernetes-view-header>
+<page-header
+  ng-if="ctrl.state.viewReady"
+  title="'Volume details'"
+  breadcrumbs="[
+    { label:'Namespaces', link:'kubernetes.resourcePools' },
+    { 
+      label:ctrl.volume.ResourcePool.Namespace.Name,
+      link: 'kubernetes.resourcePools.resourcePool', 
+      linkParams:{ id: ctrl.volume.ResourcePool.Namespace.Name }
+    },
+    { label:'Volumes', link:'kubernetes.volumes' },
+     ctrl.volume.PersistentVolumeClaim.Name,
+     ]"
+  reload="true"
+>
+</page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/kubernetes/views/volumes/volumes.html

@@ -1,4 +1,4 @@
-<kubernetes-view-header title="Volume list" state="kubernetes.volumes" view-ready="ctrl.state.viewReady"> Volumes </kubernetes-view-header>
+<page-header ng-if="ctrl.state.viewReady" title="'Volume list'" breadcrumbs="['Volumes']" reload="true"></page-header>
 
 <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
 

app/portainer/rbac/views/roles/roles.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Roles">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.roles" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Role management</rd-header-content>
-</rd-header>
+<page-header title="'Roles'" breadcrumbs="['Role management']" reload="true"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/user-activity/activity-logs-view/activity-logs-view.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="User Activity">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="." ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Activity Logs</rd-header-content>
-</rd-header>
+<page-header title="'User Activity'" breadcrumbs="['Activity Logs']" reload="true"> </page-header>
 
 <div class="be-indicator-container">
   <rd-widget>

app/portainer/user-activity/auth-logs-view/auth-logs-view.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="User Activity">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.authLogs" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>User authentication activity</rd-header-content>
-</rd-header>
+<page-header title="'User Activity'" breadcrumbs="['User authentication activity']" reload="true"> </page-header>
 
 <div class="be-indicator-container">
   <rd-widget>

app/portainer/views/account/account.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="User settings"></rd-header-title>
-  <rd-header-content>User settings</rd-header-content>
-</rd-header>
+<page-header title="'User settings'" breadcrumbs="['User settings']"> </page-header>
 
 <demo-feature-indicator ng-if="isDemoUser" content="'You cannot change the password of this account in the demo version of Portainer.'"> </demo-feature-indicator>
 

app/portainer/views/account/create-user-access-token/create-user-access-token.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create access token"></rd-header-title>
-  <rd-header-content> <a ui-sref="portainer.account">User settings</a> &gt; Add access token </rd-header-content>
-</rd-header>
+<page-header title="'Create access token'" breadcrumbs="[{label:'User settings', link:'portainer.account'}, 'Add access token']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create Custom template"></rd-header-title>
-  <rd-header-content> <a ui-sref="docker.templates.custom">Custom Templates</a> &gt; Create Custom template </rd-header-content>
-</rd-header>
+<page-header title="'Create Custom template'" breadcrumbs="[{label:'Custom Templates', link:'docker.templates.custom'}, 'Create Custom template']"> </page-header>
 
 <div class="row" ng-if="!$ctrl.state.loading">
   <div class="col-sm-12">

app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html

@@ -1,11 +1,5 @@
-<rd-header id="view-top">
-  <rd-header-title title-text="Custom Templates">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.templates.custom" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Custom Templates</rd-header-content>
-</rd-header>
+<page-header title="'Custom Templates'" breadcrumbs="['Custom Templates']" reload="true"> </page-header>
+
 <div class="row">
   <stack-from-template-form
     ng-if="$ctrl.state.selectedTemplate"

app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Edit Custom Template">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.templates.custom.edit({id:$ctrl.formValues.Id})" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content> <a ui-sref="docker.templates.custom">Custom templates</a> &gt; {{ $ctrl.formValues.Title }} </rd-header-content>
-</rd-header>
+<page-header title="'Edit Custom Template'" breadcrumbs="[{label:'Custom templates', link:'docker.templates.custom'}, $ctrl.formValues.Title]" reload="true"> </page-header>
 
 <div class="row" ng-if="$ctrl.formValues">
   <div class="col-sm-12">

app/portainer/views/devices/import/importDevice.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="FDO Device Configuration"></rd-header-title>
-  <rd-header-content> <a ui-sref="portainer.endpoints">Environments</a> &gt; Import FDO Device </rd-header-content>
-</rd-header>
+<page-header title="'FDO Device Configuration'" breadcrumbs="[{label:'Environments', link:'portainer.endpoints'}, 'Import FDO Device']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/devices/profiles/add/addProfile.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create profile"></rd-header-title>
-  <rd-header-content> <a ui-sref="portainer.settings">Settings</a> &gt; Edge Compute </rd-header-content>
-</rd-header>
+<page-header title="'Create profile'" breadcrumbs="[{label:'Settings', link:'portainer.settings'}, 'Edge Compute']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/devices/profiles/edit/editProfile.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Edit profile"></rd-header-title>
-  <rd-header-content> <a ui-sref="portainer.settings">Settings</a> &gt; Edge Compute </rd-header-content>
-</rd-header>
+<page-header title="'Edit profile'" breadcrumbs="[{label:'Settings', link:'portainer.settings'}, 'Edge Compute']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/endpoint-registries/registries.html

@@ -1,11 +1,5 @@
-<rd-header>
-  <rd-header-title title-text="Environment registries">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="docker.registries" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Registry management</rd-header-content>
-</rd-header>
+<page-header title="'Environment registries'" breadcrumbs="['Registry management']" reload="true"> </page-header>
+
 <div class="row">
   <div class="col-sm-12">
     <registries-datatable

app/portainer/views/endpoints/access/endpointAccess.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Environment access"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="portainer.endpoints">Environments</a> &gt; <a ui-sref="portainer.endpoints.endpoint({id: ctrl.endpoint.Id})">{{ ctrl.endpoint.Name }}</a> &gt; Access management
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Environment access'"
+  breadcrumbs="[
+    { label:'Environments', link:'portainer.endpoints' },
+    { 
+      label:ctrl.endpoint.Name,
+      link: 'portainer.endpoints.endpoint', 
+      linkParams:{id: ctrl.endpoint.Id}
+    }, 'Access management']"
+>
+</page-header>
 
 <div class="row" ng-if="ctrl.endpoint">
   <div class="col-sm-12">

app/portainer/views/endpoints/create/createendpoint.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create environment"></rd-header-title>
-  <rd-header-content> <a ui-sref="portainer.endpoints">Environments</a> &gt; Add environment </rd-header-content>
-</rd-header>
+<page-header title="'Create environment'" breadcrumbs="[{label:'Environments', link:'portainer.endpoints'}, 'Add environment']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/endpoints/edit/endpoint.html

@@ -1,13 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Environment details">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.endpoints.endpoint({id: endpoint.Id})" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>
-    <a ui-sref="portainer.endpoints">Environments</a> &gt; <a ui-sref="portainer.endpoints.endpoint({id: endpoint.Id})">{{ endpoint.Name }}</a>
-  </rd-header-content>
-</rd-header>
+<page-header title="'Environment details'" breadcrumbs="[{label:'Environments', link:'portainer.endpoints'}, endpoint.Name]" reload="true"> </page-header>
 
 <div class="row">
   <div ng-if="state.edgeEndpoint">

app/portainer/views/endpoints/endpoints.html

@@ -1,11 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Environments">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.endpoints" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Environment management</rd-header-content>
-</rd-header>
+<page-header title="'Environments'" breadcrumbs="['Environment management']" reload="true"> </page-header>
 
 <view-loading ng-if="state.loadingMessage" message="state.loadingMessage"></view-loading>
 

app/portainer/views/endpoints/kvm/endpointKVM.html

@@ -1,10 +1,16 @@
-<rd-header>
-  <rd-header-title title-text="KVM Control"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="portainer.endpoints">Environments</a> &gt; <a ui-sref="portainer.endpoints.endpoint({id: $state.endpoint.Id})">{{ $state.endpoint.Name }}</a> &gt;
-    {{ $state.deviceName }} > KVM Control
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'KVM Control'"
+  breadcrumbs="[
+    { label:'Environments', link:'portainer.endpoints' },
+    { 
+      label:$state.endpoint.Name,
+      link: 'portainer.endpoints.endpoint', 
+      linkParams:{id: $state.endpoint.Id}
+    }, 
+    $state.deviceName,
+    'KVM Control']"
+>
+</page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/groups/access/groupAccess.html

@@ -1,9 +1,14 @@
-<rd-header>
-  <rd-header-title title-text="Environment group access"></rd-header-title>
-  <rd-header-content>
-    <a ui-sref="portainer.groups">Groups</a> &gt; <a ui-sref="portainer.groups.group({id: group.Id})">{{ group.Name }}</a> &gt; Access management
-  </rd-header-content>
-</rd-header>
+<page-header
+  title="'Environment group access'"
+  breadcrumbs="[
+    { label:'Groups', link:'portainer.groups' },
+    { 
+      label:group.Name,
+      link: 'portainer.groups.group', 
+      linkParams:{id: group.Id}
+    }, 'Access management']"
+>
+</page-header>
 
 <div class="row" ng-if="group">
   <div class="col-sm-12">

app/portainer/views/groups/create/creategroup.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Create environment group"></rd-header-title>
-  <rd-header-content> <a ui-sref="portainer.groups">Environment groups</a> &gt; Add group </rd-header-content>
-</rd-header>
+<page-header title="'Create environment group'" breadcrumbs="[{label:'Environment groups', link:'portainer.groups'}, 'Add group']"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/groups/edit/group.html

@@ -1,7 +1,4 @@
-<rd-header>
-  <rd-header-title title-text="Environment group details"></rd-header-title>
-  <rd-header-content> <a ui-sref="portainer.groups">Groups</a> &gt; {{ ::group.Name }} </rd-header-content>
-</rd-header>
+<page-header title="'Environment group details'" breadcrumbs="[{label:'Groups', link:'portainer.groups'}, group.Name]"> </page-header>
 
 <div class="row">
   <div class="col-sm-12">