Já mostrei como exibir o controlo de navegação de breadcrumbs em SharePoint 2013. Agora, vou explicar como usar este controlo inline para que as breadcrumbs estejam sempre visiveis.
Faça as alterações que se seguem à sua masterpage personalizada. O exemplo é baseado nas masterpages HTML que o SharePoint 2013 disponibiliza, mas o mesmo aplica-se aos ficheiros .master.
Faça o download do ficheiro seattle.html e procure nele a linha:
<div class="ms-breadcrumb-dropdownBox" style="display:none;">Dentro desta div encontra o controlo de breadcrumb, que está escondido por defeito.
Não precisamos do controlo todo, apenas do ListSiteMapPath. Pode copiar esse controlo para o seu ficheiro masterpage, para onde quer que as breadcrumbs fiquem.
Este é o código original, se não quiser pesquisar no seattle.html:
<!--SPM:<SharePoint:ListSiteMapPath
runat="server"
SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
RenderCurrentNodeAsLink="false"
PathSeparator=""
CssClass="ms-breadcrumb"
NodeStyle-CssClass="ms-breadcrumbNode"
CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
RootNodeStyle-CssClass="ms-breadcrumbRootNode"
NodeImageOffsetX="0"
NodeImageOffsetY="289"
NodeImageWidth="16"
NodeImageHeight="16"
NodeImageUrl="/_layouts/15/images/fgimg.png?rev=30"
RTLNodeImageOffsetX="0"
RTLNodeImageOffsetY="312"
RTLNodeImageWidth="16"
RTLNodeImageHeight="16"
RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=30"
HideInteriorRootNodes="true"
SkipLinkText=""/>-->
Agora terá que alterar algumas propriedades:
<!--SPM:<SharePoint:ListSiteMapPath
runat="server"
SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
RenderCurrentNodeAsLink="false"
PathSeparator=""
CssClass="my-breadcrumb"
NodeStyle-CssClass="my-breadcrumbNode"
CurrentNodeStyle-CssClass="my-breadcrumbCurrentNode"
RootNodeStyle-CssClass="my-breadcrumbRootNode"
NodeImageOffsetX="0"
NodeImageOffsetY="0"
NodeImageWidth="6"
NodeImageHeight="9"
NodeImageUrl="/_layouts/15/images/menu-right.gif?rev=30"
RTLNodeImageOffsetX="0"
RTLNodeImageOffsetY="0"
RTLNodeImageWidth="6"
RTLNodeImageHeight="9"
RTLNodeImageUrl="/_layouts/15/images/menu-right.gif?rev=30"
HideInteriorRootNodes="true"
SkipLinkText=""/>-->
As mudanças que foram feitas:
- CssClass, CurrentNodeStyle-CssClass e RootNodeStyle-CssClass, para poder usar estas classes no meu ficheiro CSS.
- NodeImageOffsetX, NodeImageOffsetY, RTLNodeImageWidth, RTLNodeImageHeight, RTLNodeImageOffsetX, RTLNodeImageOffsetY, RTLNodeImageWidth, RTLNodeImageHeight. Está a ser usada uma imagem de separador diferente da default, por isso estas propriedades têm condizer com a imagem.
- NodeImageUrl, RTLNodeImageUrl. O URL para a nova imagem de separador. Esta imagem vem com o SharePoint 2013, por isso pode usar este código directamente na sua masterpage.
Para finalizar, os estilos:
/* esconde o separador antes do root node */
.my-breadcrumbRootNode > .s4-breadcrumb-arrowcont {
display: none;
}
ul.my-breadcrumb ul,
ul.my-breadcrumb li {
display: inline;
}
/* espaço à volta do separador */
.s4-breadcrumb-arrowcont {
margin: 0 10px;
}
/* corigir o alinhamento da imagem de separador */
.s4-breadcrumb-arrowcont > span.s4-breadcrumb {
display: inline !important;
overflow: auto !important;
position: static !important;
}
/* corigir o alinhamento da imagem de separador */
.s4-breadcrumb-arrowcont > span.s4-breadcrumb img {
position: static !important;
}
E assim temos um controlo breadcrumb inline:
