werc Bringing minimalism and sanity to the web

Suckless Horizontal Menu

The horizontal menu by Suckless is decent, but here’s an alternative approach based on the default werc menu. We define a handler for the subheader, a <div> that is normally empty, that prints a vertical menu, with each menu having the CSS class headerMenu appended by a number of underscores equal to the nesting depth (so you have headerMenu, headerMenu_, headerMenu__, etc). This allows styling of each level. Just put the following in your _werc/config or etc/initrc.local.


fn nav_header {
    for (d in $req_paths_list) {
    echo '<ul class="headerMenu'$level'">'
    ls -F $sitedir/./$d >[2]/dev/null \
       | { 
            sed $dirfilter'/\/[^_.\/][^\/]*(\.(md|txt|html)|\/)$/!d; s!^'$sitedir'!!; '$dirclean 
            if(! ~ $#synth_paths 0) echo $synth_paths | tr ' ' $NEW_LINE 
       } | sort -u | awk -F/ ' 
        d = ""
        if(match($0, "/$"))
            d = "/"
        sub("/$", "") # Strip trailing / for dirs so NF is consistent 

        bname = $NF d
        path = $0 d
        gsub(/[\-_]/, " ", bname)

        # To avoid false matches add trailing / even for plain files to act as delimiter
        pa = path
        gsub(/[^\/]$/, "&/", pa) 

        if(index(ENVIRON["req_path"] "/", pa) == 1)
            print "<li><a href=\"" path "\" class=\"thisPage\">" bname "</a></li>"
            print "<li><a href=\"" path "\">" bname "</a></li>"
    END { print "</ul>" }'

Note that this alone does not remove the default menu. To accomplish this, remove the sidebar handler:


Also, in order for the menu to actually be horizontal, you’ll need a bit of CSS:

.subHeader ul {
  margin: 0;

.subHeader li {
  display: inline;
  list-style-type: none;
  border-right: 1px solid #aaa;
  margin: 0;
  padding: 0;

.subHeader a {
  color: #113;
  padding: 5px;

.subHeader a:hover, .thisPage {
  background-color: #eee;

.headerMenu {
  background-color: #999;

.headerMenu_ {
  background-color: #aaa;

.headerMenu__ {
  background-color: #bbb;

To post a comment you need to login first.