Sidebar

La sidebar è una barra di navigazione laterale al cui interno possono essere incluse liste di link.
Qui potrai reperire la User Interface, lo snippet e le modalità di utilizzo per le sidebar nell’Ecosistema digitale Turismo Cultura.

Sidebar generica

                                            
<div class="dms-sidebar">
    <div class="dms-sidebar--linklist-wrapper">
        <h3>Titolo sidebar</h3>
        <ul class="link-list">
            <li><a class="list-item active" href="#" title="Link list"><span>Link
                        list
                        active</span></a>
            </li>
            <li><a class="list-item disabled" href="#" title="Link list"><span>Link
                        list
                        disabled </span></a>
            </li>
            <li><a class="list-item" href="#" title="Link list"><span>Link
                        list</span></a>
            </li>
            <li><a class="list-item" href="#" title="Link list"><span>Link
                        list</span></a>
            </li>
        </ul>
    </div>
    <div class="dms-sidebar--linklist-wrapper linklist-secondary">
        <ul class="link-list">
            <li><a class="list-item" href="#" title="Secondary list"><span>Secondary
                        item </span></a>
            </li>
            <li><a class="list-item active" href="#"
                    title="Secondary list"><span>Secondary item active
                    </span></a>
            </li>
            <li><a class="list-item disabled" href="#"
                    title="Secondary list"><span>Secondary item
                        disabled</span></a>
            </li>
        </ul>
    </div>
</div>

Sidebar con icone

                    
<div class="dms-sidebar">
    <div class="dms-sidebar--linklist-wrapper">
        <h3>Titolo sidebar</h3>
        <ul class="link-list">
            <li><a href="#" class="list-item active" title="Link list active"><i
                        class="dms-wk-icon-news">
                    </i><span>Link list
                        active </span></a>
            </li>
            <li><a class="list-item disabled" href="#" title="Link list
                disabled"><i class="dms-wk-icon-news"> </i><span>Link list
                        disabled </span></a>
            </li>
            <li><a href="#" class="list-item " title="Link list"><i
                        class="dms-wk-icon-news"></i><span>Link list</span></a>
            </li>
            <li><a href="#" class="list-item " title="Link list"><i
                        class="dms-wk-icon-news"> </i><span>Link list</span></a>
            </li>
        </ul>
    </div>
    <div class="dms-sidebar--linklist-wrapper linklist-secondary">
        <ul class="link-list">
            <li>
                <a href="#" class="list-item" title="Secondary item"
                    target="_blank"><i class="dms-wk-icon-external-link">
                    </i><span>Secondary item </span></a>
            </li>
            <li>
                <a href="#" class="list-item active" title="Secondary item active"
                    target="_blank">
                    <i class="dms-wk-icon-external-link"></i>
                    <span>Secondary item active</span>
                </a>
            </li>
            <li>
                <a href="#" class="list-item disabled"
                    title="Secondary item disabled" target="_blank">
                    <i class="dms-wk-icon-external-link"></i>
                    <span>Secondary item disabled </span>
                </a>
            </li>
        </ul>
    </div>
</div>

Utilizzo

La sidebar può contenere link di navigazione interni al portale, link esterni o documenti (negli ultimi due casi sarà necessario aggiungere il target=_blank al link).
Per la sidebar laterale può essere utilizzato anche il tab verticale, presente nella pagina Tab.