DC.Gov Remote User Interface

Quick links

Header
Footer
This new version of the remote ui is now responsive to help meet the demand for mobile friendly websites and applications.

Using Navigation

If you would like to use the standard DC.gov navigation links or your own custom application links, there are a few things you need to be aware of. The main navigation for the Remote UI is cloned using jQuery and becomes the mobile menu. Your menu can be DC.Gov's default menu or your own custom menu. Whichever method you choose, a particular html markup must be followed. The markup example can found in the "Custom Navigation" section below or by viewing the source code. Both examples are currently being used on this page.

Main DC.Gov Navigation

Below is the main top navigation for the DC.gov homepage. These links can be useful for applications who would like to use DC.gov's navigation. These links will be kept up to date by the maintainers of this User Interface.

Custom Navigation

The menu that is displayed for mobile version can be the default DC.Gov menu or your own custom links. To use your own custom navigation instead of DC.gov's, your html markup must follow the markup in the example below:
		<div class="dcrui-main-nav">
			<ul class="menu-sub">
				<li class="expanded"><a href="#">Main Link 1</a>
					<ul class="menu-sub" style="display:none;">
						<li class="expanded"><a href="#">Main Link 1 Sub-Menu</a></li>
					</ul>
				</li>
				<li class="expanded"><a href="#">Main Link 2</a>
					<ul class="menu-sub" style="display:none;">
						<li class="expanded"><a href="#">Main Link 1 Sub-Menu</a></li>
					</ul>
				</li>
			<ul>
		</div>