Hi, and welcome to the DNN forum.
As far as I know the menu on the top right is a styled piece of HTML content with a mix of image and text links, placed into a HTML module. This can be recreated through HTML and CSS quite easily. What you're looking to do is create the graphics, and lay this out (preferably in an unordered list, although the above sample is in DIVs). For each list item insert an image and a text link. then using CSS, float all the list items to the left, give them a fixed width and center the content. You may need to add a clearing div after the ul if the height of the pane is controlled by the content. I've created a quick sample of what the code will look like below.
HTML
<ul id="imgnav">
<li><a href="sample.html"><img src="image.gif" width="20px" height="20px" border="0" /></a><br />
This is sample text</li>
<li><a href="sample.html"><img src="image.gif" width="20px" height="20px" border="0" /></a><br />
This is sample text</li>
<li><a href="sample.html"><img src="image.gif" width="20px" height="20px" border="0" /></a><br />
This is sample text</li>
<li><a href="sample.html"><img src="image.gif" width="20px" height="20px" border="0" /></a><br />
This is sample text</li>
</ul>
<div style="clear:both"><!-- clear --></div>
CSS
ul#imgnav{
margin:0;
padding:0;
}
ul#imgnav li{
width:30px;
text-align:center;
float:left;
}
ul#imgnav a{
outline:none;
}
ul#imgnav li img{
margin-bottom:5px;
}
If you're not too confident with CSS, the other option would be to create the layout using a table.
Hope this helps,
Rick.