Sidebar Configuration¶
The sidebar configuration file configures the items available for interaction on the left side of Studio. The Sidebar shows different projections of the content in addition to other tools to assist in content authoring.
To modify the sidebar configuration, click on 
from the bottom of the Sidebar, then click on Configuration and select Sidebar Configuration from the dropdown list.
Sample¶
1<?xml version="1.0" encoding="UTF-8"?>
2<!-- sidebar.xml
3 This configuration file controls the SideBar in Crafter Studio. The SideBar is the left bar that shows
4 different projections of the content in addition to other tools to assist in content authoring.
5
6 <contextNav>
7 <modulehook>
8 <name>dashboard</name>
9 <params>
10 <label>Dashboard</label>
11 <path>/site-dashboard</path>
12 <icon> (optional icon customization - only one state (no tree link))
13 <class>fa-cog</class> (change default icon - using Font Awesome class)
14 <styles> (Change default icon styles - using css rules)
15 <color>#409a00</color>
16 <font-size>16px</font-size>
17 </styles>
18 </icon>
19 <roles>
20 <role>admin</role>
21 <role>developer</role>
22 </roles>
23 <label>Site Config</label>
24 <path>/site-config</path>
25 <showRootItem>true</showRootItem>
26 <onClick>preview</onClick>
27 </params>
28 </modulehook>
29 </contextNav>
30
31 <contextNav>
32 <modulehook>
33 <name>wcm-root-folder</name>
34 <showDivider>true</showDivider>
35 <label>Pages</label>
36 <path>/site/website</path>
37 <module-icon-open> (optional module-icon-open customization - state open)
38 <class>fa-cog</class>
39 <styles>
40 <color>#409a00</color>
41 <font-size>16px</font-size>
42 </styles>
43 </module-icon-open>
44 <module-icon-closed> (optional module-icon-closed customization - state close)
45 <class>fa-cog</class>
46 <styles>
47 <color>#409a00</color>
48 <font-size>16px</font-size>
49 </styles>
50 </module-icon-closed>
51 <showRootItem>true</showRootItem>
52 <onClick>preview</onClick>
53 </params>
54 </modulehook>
55 </contextNav>
56
57 Common module hooks include:
58 <modulehook>
59 <name>wcm-root-folder</name> Type: Browsable content tree of descriptors and folders
60 <showDivider>true</showDivider> Display a visual divider after the folder (true/false)
61 <params>
62 <label>Pages</label> Label
63 <path>/site/website</path> Path to root tree at. You mave multiple path elements
64 <showRootItem>true</showRootItem> Display the root folder (true/false)
65 <onClick>preview</onClick> Attempt to preview asset on click
66 <roles>...</roles> (optional roles list that has access to the menu item)
67 </params>
68 </modulehook>
69
70 <modulehook>
71 <name>wcm-asset-folder</name> Type: Browsable content tree of files and folders
72 <showDivider>true</showDivider> Display a visual divider after the foler (true/false)
73 <params>
74 <label>Static Assets</label> Label
75 <path>/static-assets</path> Path to root tree at. You mave multiple path elements
76 <showRootItem>true</showRootItem> Display the root folder (true/false)
77 <onClick>preview</onClick> Attempt to preview asset on click
78 <roles>...</roles> (optional roles list that has access to the menu item)
79 </params>
80 </modulehook>
81
82 <modulehook>
83 <name>dashboard</name> Type: Display a link to the Sites Dashboard
84 <params>
85 <label>Dashboard</label> Label
86 <path>/site-dashboard</path> Relative link to Sites Dashboard
87 <roles>...</roles> (optional roles list that has access to the menu item)
88 </params>
89 </modulehook>
90
91 <modulehook>
92 <name>site-config</name> Type: Display a link to the Site Config Panel
93 <params>
94 <label>Dashboard</label> Label
95 <path>/site-dashboard</path> Relative link to Site Config Panel
96 <roles>...</roles> (optional roles list that has access to the menu item)
97 </params>
98 </modulehook>
99-->
100<contextNav>
101 <contexts>
102 <context>
103 <groups>
104 <group>
105 <menuItems>
106 <menuItem>
107 <modulehooks>
108 <!-- Dashboard -->
109 <modulehook>
110 <name>dashboard</name>
111 <params>
112 <label>Dashboard</label>
113 <path>/site-dashboard</path>
114 </params>
115 </modulehook>
116
117 <!-- Site IA Pages -->
118 <modulehook>
119 <name>wcm-root-folder</name>
120 <params>
121 <label>Pages</label>
122 <path>/site/website</path>
123 <showRootItem>true</showRootItem>
124 <onClick>preview</onClick>
125 </params>
126 </modulehook>
127
128 <!-- Components -->
129 <modulehook>
130 <name>wcm-root-folder</name>
131 <params>
132 <label>Components</label>
133 <path>/site/components</path>
134 <showRootItem>true</showRootItem>
135 </params>
136 </modulehook>
137
138 <!-- Taxonomy -->
139 <modulehook>
140 <name>wcm-root-folder</name>
141 <params>
142 <label>Taxonomy</label>
143 <path>/site/taxonomy</path>
144 <showRootItem>true</showRootItem>
145 </params>
146 </modulehook>
147
148 <!-- Static Assets -->
149 <modulehook>
150 <name>wcm-assets-folder</name>
151 <params>
152 <label>Static Assets</label>
153 <path>/static-assets</path>
154 <showRootItem>true</showRootItem>
155 <onClick>none</onClick>
156 </params>
157 </modulehook>
158
159 <!-- Templates -->
160 <modulehook>
161 <name>wcm-assets-folder</name>
162 <params>
163 <label>Templates</label>
164 <path>/templates</path>
165 <showRootItem>true</showRootItem>
166 <onClick>none</onClick>
167 </params>
168 </modulehook>
169
170 <!-- Scripts -->
171 <modulehook>
172 <name>wcm-assets-folder</name>
173 <params>
174 <label>Scripts</label>
175 <path>/scripts</path>
176 <showRootItem>true</showRootItem>
177 <onClick>none</onClick>
178 </params>
179 </modulehook>
180
181 <!-- Site Config -->
182 <modulehook>
183 <name>site-config</name>
184 <params>
185 <roles>
186 <role>admin</role>
187 <role>developer</role>
188 </roles>
189 <label>Site Config</label>
190 <path>/site-config</path>
191 </params>
192 </modulehook>
193 </modulehooks>
194
195 </menuItem>
196 </menuItems>
197 </group>
198 </groups>
199 </context>
200 </contexts>
201</contextNav>
Sidebar Excludes¶
To hide items (exclude) in the sidebar, use
...
<excludes>
<exclude PATTERN_TO_EXCLUDE/>
...
</excludes>
where:
PATTERN_TO_EXCLUDE is a prefix of items to hide from the Sidebar
Let’s take a look at an example using the a site created from the Website Editorial blueprint, to hide the folder /site/website/articles/2017/3.
Here’s the site tree before the 2017/3 folder is hidden
Here’s the configuration to hide the folder:
1<!-- Site IA Pages -->
2<modulehook>
3 <name>wcm-root-folder</name>
4 <params>
5 <label>Pages</label>
6 <path>/site/website</path>
7 <showRootItem>true</showRootItem>
8 <onClick>preview</onClick>
9 <excludes>
10 <exclude>/site/website/articles/2017/3</exclude>
11 </excludes>
12 </params>
13</modulehook>
14...
Here’s the site tree with the folder 2017/3 hidden:
Sidebar Icon Customization¶
The default icon and icon colors of modules in the sidebar can be changed including when expanding/collapsing modules.
Let’s take a look at an example of putting a red border when Taxonomy is expanded and for Templates, a red font color when expanded and a blue font color when collapsed
Let’s take a look at an example of changing the icon and icon color of the Dashboard module to use a tag as its icon, colored green and, to change the icon and color of Pages to a red anchor icon when the module is collapsed, and to a green cog when the module is expanded.
Here’s the default colors of the modules in the sidebar. Pay close attention to the Dashboard and Pages widget colors.
Here’s the configuration for changing the icon and color of Dashboard to a green tag icon, and changing the icon and color of Pages to a red anchor icon when the module is collapsed, and to a green cog when the module is expanded.
1<contextNav>
2 <modulehook>
3 <name>wcm-root-folder</name>
4 <params>
5 <showDivider>true</showDivider>
6 <label>Pages</label>
7 <path>/site/website</path>
8 <module-icon-open> (optional module-icon-open customization - state open)
9 <class>fa-cog</class> (change default icon - using Font Awesome class)
10 <styles> (Change default icon styles - using css rules)
11 <color>green</color>
12 <font-size>16px</font-size>
13 </styles>
14 </module-icon-open>
15 <module-icon-closed> (optional module-icon-closed customization - state close)
16 <class>fa-anchor</class>
17 <styles>
18 <color>red</color>
19 <font-size>16px</font-size>
20 </styles>
21 </module-icon-closed>
22 <showRootItem>true</showRootItem>
23 <onClick>preview</onClick>
24 </params>
25 </modulehook>
26</contextNav>
27...
Here’s the sidebar with the icons and colors changed:
