diff --git a/.gitignore b/.gitignore
index b4ced5e11..4dcd9f6b3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,6 @@
 /tmp
 
 ## ngc logs
-
 *.ngfactory.ts
 *.ngsummary.json
 
diff --git a/README.md b/README.md
index 8deb26e58..456acbe62 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@ Now you're good to go!
 
 ## Dependencies
 
-* [Angular 2](https://angular.io) (>=2.0.0)
+* [Angular 2](https://angular.io) (^4.0.0)
 * [Semantic UI CSS](http://semantic-ui.com/) (jQuery is **not** required)
 
 ## Components
@@ -62,6 +62,7 @@ The current list of available components with links to their docs is below:
 * [Rating](https://edcarroll.github.io/ng2-semantic-ui/#/components/rating)
 * [Search](https://edcarroll.github.io/ng2-semantic-ui/#/components/search)
 * [Select](https://edcarroll.github.io/ng2-semantic-ui/#/components/select)
+* [Sidebar](https://edcarroll.github.io/ng2-semantic-ui/#/components/sidebar)
 * [Tabs](https://edcarroll.github.io/ng2-semantic-ui/#/components/tabs)
 * [Transition](https://edcarroll.github.io/ng2-semantic-ui/#/components/transition)
 
diff --git a/angular-cli.json b/angular-cli.json
index 4c985940a..32ad12b03 100644
--- a/angular-cli.json
+++ b/angular-cli.json
@@ -16,7 +16,10 @@
       "tsconfig": "tsconfig.json",
       "prefix": "demo",
       "mobile": false,
-      "styles": ["styles.css"],
+      "styles": [
+        "css/styles.css",
+        "css/code.css"
+      ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
       "environments": {
diff --git a/components/dropdown/dropdown-menu.ts b/components/dropdown/dropdown-menu.ts
index d49457b49..5ef7f5d55 100644
--- a/components/dropdown/dropdown-menu.ts
+++ b/components/dropdown/dropdown-menu.ts
@@ -3,6 +3,12 @@ import {SuiTransition, Transition} from '../transition/transition';
 import {DropdownService, DropdownAutoCloseType} from './dropdown.service';
 import {TransitionController} from '../transition/transition-controller';
 import {KeyCode} from '../util/util';
+// Polyfill for IE
+import "element-closest";
+
+interface AugmentedElement extends Element {
+    closest(selector:string):AugmentedElement;
+}
 
 @Directive({
     // We must attach to every '.item' as Angular doesn't support > selectors.
@@ -137,7 +143,8 @@ export class SuiDropdownMenu extends SuiTransition implements AfterContentInit {
         e.stopPropagation();
 
         if (this._service.autoCloseMode == DropdownAutoCloseType.ItemClick) {
-            if (e.srcElement.classList.contains("item")) {
+            const target = e.target as AugmentedElement;
+            if (this.element.nativeElement.contains(target.closest(".item")) && !/input|textarea/i.test(target.tagName)) {
                 // Once an item is selected, we can close the entire dropdown.
                 this._service.setOpenState(false, true);
             }
diff --git a/components/dropdown/dropdown.ts b/components/dropdown/dropdown.ts
index 776c1e87d..7802e6625 100644
--- a/components/dropdown/dropdown.ts
+++ b/components/dropdown/dropdown.ts
@@ -56,7 +56,7 @@ export class SuiDropdown implements AfterContentInit {
 
     @HostBinding('attr.tabindex')
     public get tabIndex() {
-        return this.isDisabled ? -1 : 0;
+        return (this.isDisabled || this.service.isNested) ? null : 0;
     }
 
     @Input()
diff --git a/components/index.ts b/components/index.ts
index b04b11698..8f4b56a61 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -9,6 +9,7 @@ export * from "./progress/progress.module";
 export * from "./rating/rating.module";
 export * from "./search/search.module";
 export * from "./select/select.module";
+export * from "./sidebar/sidebar.module";
 export * from "./tabs/tab.module";
 export * from "./transition/transition.module";
 
diff --git a/components/popup/popup.directive.ts b/components/popup/popup.directive.ts
index 453ab8c54..603a93e57 100644
--- a/components/popup/popup.directive.ts
+++ b/components/popup/popup.directive.ts
@@ -123,6 +123,9 @@ export class SuiPopupDirective {
         if (!this._popupComponentRef) {
             const factory = this._componentFactoryResolver.resolveComponentFactory(SuiPopup);
             this._popupComponentRef = this._viewContainerRef.createComponent(factory);
+            
+            // Move the generated element to the body to avoid any positioning issues.
+            document.querySelector("body").appendChild(this._popupComponentRef.location.nativeElement);
 
             this._popup.onClose.subscribe(() => {
                 this._popupComponentRef.destroy();
diff --git a/components/search/search.module.ts b/components/search/search.module.ts
index e56917b85..2e24f7a13 100644
--- a/components/search/search.module.ts
+++ b/components/search/search.module.ts
@@ -4,7 +4,7 @@ import {FormsModule} from "@angular/forms";
 import {SuiDropdownModule} from "../dropdown/dropdown.module";
 import {SuiTransitionModule} from "../transition/transition.module";
 import {SuiSearch, SuiSearchValueAccessor} from './search';
-import {SearchService} from './search.service';
+import {SearchService, LookupFn} from './search.service';
 
 @NgModule({
     imports: [
@@ -23,4 +23,4 @@ import {SearchService} from './search.service';
 })
 export class SuiSearchModule {}
 
-export {SearchService};
\ No newline at end of file
+export {SearchService, LookupFn};
\ No newline at end of file
diff --git a/components/search/search.service.ts b/components/search/search.service.ts
index 3342efb46..f581f4b16 100644
--- a/components/search/search.service.ts
+++ b/components/search/search.service.ts
@@ -1,10 +1,13 @@
 import {readValue} from '../util/util';
 
 // Define useful types to avoid any.
-export type LookupFn<T> = (query:string) => Promise<T[]>
+export type LookupFn<T> = (query:string) => Promise<T[]> | Promise<T>;
+export type QueryLookupFn<T> = (query:string) => Promise<T[]>;
+export type ItemLookupFn<T, U> = (query:string, initial:U) => Promise<T>;
+export type ItemsLookupFn<T, U> = (query:string, initial:U[]) => Promise<T[]>;
+
 type CachedArray<T> = { [query:string]:T[] };
 
-// T extends JavascriptObject so we can do a recursive search on the object.
 export class SearchService<T> {
     // Stores the available options.
     private _options:T[];
@@ -36,6 +39,22 @@ export class SearchService<T> {
         this.reset();
     }
 
+    public get queryLookup() {
+        return this._optionsLookup as QueryLookupFn<T>;
+    }
+
+    public get hasItemLookup() {
+         return this.optionsLookup && this.optionsLookup.length == 2;
+    }
+
+    public itemLookup<U>(initial:U) {
+        return (this._optionsLookup as ItemLookupFn<T, U>)(undefined, initial);
+    }
+
+    public itemsLookup<U>(initial:U[]) {
+        return (this._optionsLookup as ItemsLookupFn<T, U>)(undefined, initial);
+    }
+
     public get optionsField() {
         return this._optionsField
     }
@@ -112,7 +131,7 @@ export class SearchService<T> {
         if (this._optionsLookup) {
             this._isSearching = true;
 
-            this._optionsLookup(this._query)
+            this.queryLookup(this._query)
                 .then(results => {
                     // Unset 'loading' state, and display & cache the results.
                     this._isSearching = false;
@@ -170,12 +189,9 @@ export class SearchService<T> {
 
     // Resets the search back to a pristine state.
     private reset() {
-        this._query = "";
         this._results = [];
-        if (this.allowEmptyQuery) {
-            this._results = this._options;
-        }
         this._resultsCache = {};
         this._isSearching = false;
+        this.updateQuery("");
     }
 }
\ No newline at end of file
diff --git a/components/search/search.ts b/components/search/search.ts
index 4221eb105..3a187fd6b 100644
--- a/components/search/search.ts
+++ b/components/search/search.ts
@@ -39,7 +39,6 @@ import {PositioningService, PositioningPlacement} from '../util/positioning.serv
 export class SuiSearch<T> implements AfterViewInit {
     public dropdownService:DropdownService;
     public searchService:SearchService<T>;
-    public position:PositioningService;
 
     @ViewChild(SuiDropdownMenu)
     private _menu:SuiDropdownMenu;
@@ -78,7 +77,7 @@ export class SuiSearch<T> implements AfterViewInit {
     // Sets local or remote options by determining whether a function is passed.
     @Input()
     public set options(options:T[] | LookupFn<T>) {
-        if (typeof(options) == "function") {
+        if (typeof options == "function") {
             this.searchService.optionsLookup = options;
             return;
         }
@@ -131,10 +130,6 @@ export class SuiSearch<T> implements AfterViewInit {
 
     public ngAfterViewInit() {
         this._menu.service = this.dropdownService;
-
-        // Initialse the positioning service to correctly display the results.
-        // This adds support for repositioning the results above the search when there isn't enough space below.
-        this.position = new PositioningService(this._element, this._menu.element, PositioningPlacement.BottomLeft);
     }
 
     // Selects an item.
@@ -160,10 +155,8 @@ export class SuiSearch<T> implements AfterViewInit {
 
     // Sets a specific item to be selected, updating the query automatically.
     public writeValue(item:T) {
-        if (item) {
-            this.selectedItem = item;
-            this.searchService.updateQuery(this.readValue(item) as string, () => {});
-        }
+        this.selectedItem = item;
+        this.searchService.updateQuery(item ? this.readValue(item) as string : "");
     }
 }
 
diff --git a/components/select/multi-select-label.ts b/components/select/multi-select-label.ts
index 0449a10c4..b15bb97af 100644
--- a/components/select/multi-select-label.ts
+++ b/components/select/multi-select-label.ts
@@ -55,4 +55,9 @@ export class SuiMultiSelectLabel<T> extends SuiTransition implements ISelectRend
         this._transitionController.animate(new Transition("scale", 100, TransitionDirection.Out, () =>
             this.onDeselected.emit(this.value)));
     }
+
+    @HostListener("click", ["$event"])
+    public onClick(event:MouseEvent) {
+        event.stopPropagation();
+    }
 }
\ No newline at end of file
diff --git a/components/select/multi-select.ts b/components/select/multi-select.ts
index 828426d00..67e12baa0 100644
--- a/components/select/multi-select.ts
+++ b/components/select/multi-select.ts
@@ -51,9 +51,9 @@ export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements AfterVi
     }
 
     protected optionsUpdateHook() {
-        if (this._writtenOptions && this.options.length > 0) {
+        if (this._writtenOptions && this.searchService.options.length > 0) {
             // If there were values written by ngModel before the options had been loaded, this runs to fix it.
-            this.selectedOptions = this._writtenOptions.map(v => this.options.find(o => v == this.valueGetter(o)));
+            this.selectedOptions = this._writtenOptions.map(v => this.searchService.options.find(o => v == this.valueGetter(o)));
             
             if (this.selectedOptions.length == this._writtenOptions.length) {
                 this._writtenOptions = null;
@@ -112,13 +112,20 @@ export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements AfterVi
 
     public writeValues(values:U[]) {
         if (values instanceof Array) {
-            if (this.options.length > 0) {
+            if (this.searchService.options.length > 0) {
                 // If the options have already been loaded, we can immediately match the ngModel values to options.
-                this.selectedOptions = values.map(v => this.options.find(o => v == this.valueGetter(o)));
+                this.selectedOptions = values.map(v => this.findOption(this.searchService.options, v));
             }
             if (values != [] && this.selectedOptions.length == 0) {
-                // Otherwise, cache the written value for when options are set.
-                this._writtenOptions = values;
+                if (this.valueField && this.searchService.hasItemLookup) {
+                    // If the search service has a selected lookup function, make use of that to load the initial values.
+                    this.searchService.itemsLookup<U>(values)
+                        .then(r => this.selectedOptions = r);
+                }
+                else {
+                    // Otherwise, cache the written value for when options are set.
+                    this._writtenOptions = values;
+                }
             }
         }
     }
diff --git a/components/select/select-base.ts b/components/select/select-base.ts
index e5489c2fa..5634a6f9b 100644
--- a/components/select/select-base.ts
+++ b/components/select/select-base.ts
@@ -1,6 +1,6 @@
 import {Component, ViewChild, HostBinding, ElementRef, HostListener, Input, ContentChildren, QueryList, ViewChildren, AfterContentInit, EventEmitter, Output, Renderer, TemplateRef, ViewContainerRef} from '@angular/core';
 import {DropdownService} from '../dropdown/dropdown.service';
-import {SearchService} from '../search/search.service';
+import {SearchService, LookupFn} from '../search/search.service';
 import {readValue, KeyCode} from '../util/util';
 import {PositioningService, PositioningPlacement} from '../util/positioning.service';
 import {SuiDropdownMenu, SuiDropdownMenuItem} from '../dropdown/dropdown-menu';
@@ -65,12 +65,14 @@ export abstract class SuiSelectBase<T, U> implements AfterContentInit {
     public placeholder:string;
 
     @Input()
-    public get options() {
-        return this.searchService.options;
-    }
-
-    public set options(options:T[]) {
-        this.searchService.options = options;
+    public set options(options:T[] | LookupFn<T>) {
+        if (typeof options == "function") {
+            this.searchService.optionsLookup = options;
+        }
+        else {
+            this.searchService.options = options;
+        }
+        
         this.optionsUpdateHook();
     }
 
@@ -87,6 +89,10 @@ export abstract class SuiSelectBase<T, U> implements AfterContentInit {
 
     public set query(query:string) {
         this.queryUpdateHook();
+        this.updateQuery(query);
+    }
+
+    protected updateQuery(query:string) {
         // Update the query then open the dropdown, as after keyboard input it should always be open.
         this.searchService.updateQuery(query, () =>
             this.dropdownService.setOpenState(true));
@@ -174,6 +180,11 @@ export abstract class SuiSelectBase<T, U> implements AfterContentInit {
         throw new Error("Not implemented");
     }
 
+    protected findOption(options:T[], value:U) {
+        // Tries to find an option in options array
+        return options.find(o => value == this.valueGetter(o));
+    }
+
     @HostListener("click", ['$event'])
     public onClick(e:MouseEvent) {
         e.stopPropagation();
@@ -203,7 +214,7 @@ export abstract class SuiSelectBase<T, U> implements AfterContentInit {
     // Helper that draws the provided template beside the provided ViewContainerRef.
     protected drawTemplate(siblingRef:ViewContainerRef, value:T) {
         siblingRef.clear();
-        // Use of `$implicit` means use of <template let-option> syntax is supported.
+        // Use of `$implicit` means use of <ng-template let-option> syntax is supported.
         siblingRef.createEmbeddedView(this.optionTemplate, { '$implicit': value });
     }
 }
\ No newline at end of file
diff --git a/components/select/select.ts b/components/select/select.ts
index 42a662077..701a4a032 100644
--- a/components/select/select.ts
+++ b/components/select/select.ts
@@ -3,6 +3,8 @@ import {SuiSelectBase} from './select-base';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {ISelectRenderedOption} from './select-option';
 
+export type SingleItemLookup<T, U> = (query:string, initial?:U) => Promise<T>;
+
 @Component({
     selector: 'sui-select',
     template: `
@@ -41,9 +43,9 @@ export class SuiSelect<T, U> extends SuiSelectBase<T, U> {
     }
 
     protected optionsUpdateHook() {
-        if (this._writtenOption && this.options.length > 0) {
+        if (this._writtenOption && this.searchService.options.length > 0) {
             // If there was an value written by ngModel before the options had been loaded, this runs to fix it.
-            this.selectedOption = this.options.find(o => this._writtenOption == this.valueGetter(o));
+            this.selectedOption = this.findOption(this.searchService.options, this._writtenOption);
             if (this.selectedOption) {
                 this._writtenOption = null;
                 this.drawSelectedOption();
@@ -85,13 +87,24 @@ export class SuiSelect<T, U> extends SuiSelectBase<T, U> {
 
     public writeValue(value:U) {
         if (value != null) {
-            if (this.options.length > 0) {
+            if (this.searchService.options.length > 0) {
                 // If the options have already been loaded, we can immediately match the ngModel value to an option.
-                this.selectedOption = this.options.find(o => value == this.valueGetter(o));
+                this.selectedOption = this.findOption(this.searchService.options, value);
             }
             if (!this.selectedOption) {
-                // Otherwise, cache the written value for when options are set.
-                this._writtenOption = value;
+                if (this.valueField && this.searchService.hasItemLookup) {
+                    // If the search service has a selected lookup function, make use of that to load the initial value.
+                    (this.searchService.itemLookup<U>(value) as Promise<T>)
+                        .then(r => {
+                            this.selectedOption = r;
+                            this.drawSelectedOption();
+                        });
+                    return;
+                }
+                else {
+                    // Otherwise, cache the written value for when options are set.
+                    this._writtenOption = value;
+                }
             }
         }
 
diff --git a/components/sidebar/sidebar-container.ts b/components/sidebar/sidebar-container.ts
new file mode 100644
index 000000000..6571d6c2f
--- /dev/null
+++ b/components/sidebar/sidebar-container.ts
@@ -0,0 +1,42 @@
+import {Component, AfterContentInit, HostBinding, ContentChild} from '@angular/core';
+import {SidebarService} from './sidebar.service';
+import {SuiSidebar} from './sidebar';
+import {SuiSidebarSibling} from './sidebar-sibling';
+
+@Component({
+    selector: 'sui-sidebar-container',
+    template: `<ng-content></ng-content>`,
+    styles: [`
+:host {
+    display: block;
+}
+`]
+})
+export class SuiSidebarContainer implements AfterContentInit {
+    public service:SidebarService;
+
+    @HostBinding("class.pushable")
+    private _containerClasses:boolean;
+
+    @ContentChild(SuiSidebar)
+    public sidebar:SuiSidebar;
+
+    @ContentChild(SuiSidebarSibling)
+    public sibling:SuiSidebarSibling;
+
+    constructor() {
+        this._containerClasses = true;
+    }
+
+    public ngAfterContentInit() {
+        if (!this.sidebar) {
+            throw new Error("You must include a <sui-sidebar> element within the container.");
+        }
+        this.service = this.sidebar.service;
+
+        if (!this.sibling) {
+            throw new Error("You must include a <sui-sidebar-sibling> element within the container.");
+        }
+        this.sibling.service = this.service;
+    }
+}
\ No newline at end of file
diff --git a/components/sidebar/sidebar-sibling.ts b/components/sidebar/sidebar-sibling.ts
new file mode 100644
index 000000000..1c85ee88c
--- /dev/null
+++ b/components/sidebar/sidebar-sibling.ts
@@ -0,0 +1,72 @@
+import {Component, Input, HostBinding, HostListener, ElementRef, Renderer} from '@angular/core';
+import {SidebarService, SidebarTransition} from './sidebar.service';
+
+@Component({
+    selector: 'sui-sidebar-sibling',
+    template: `<ng-content></ng-content>`,
+    styles: [`
+:host {
+    display: block;
+}
+`]
+})
+export class SuiSidebarSibling {
+    private _service:SidebarService;
+
+    public get service() {
+        return this._service;
+    }
+
+    public set service(service:SidebarService) {
+        this._service = service;
+
+        setTimeout(() => this.updateTransform());
+        this._service.isVisibleChange.subscribe(() => this.updateTransform());
+    }
+
+    @Input()
+    public isDimmedWhenVisible:boolean;
+
+    @HostBinding("class.visible")
+    public get isVisible() {
+        if (!this.service) {
+            return false;
+        }
+        return this.service.isVisible
+    }
+
+    @HostBinding("class.dimmed")
+    public get isDimmed() {
+        if (!this.service) {
+            return false;
+        }
+        return this.service.isVisible && this.isDimmedWhenVisible;
+    }
+
+    @HostBinding("class.pusher")
+    private _siblingClasses:boolean;
+
+    constructor(private _renderer:Renderer, private _element:ElementRef) {
+        this.isDimmedWhenVisible = false;
+
+        this._siblingClasses = true;
+    }
+
+    private updateTransform() {
+        this._renderer.setElementStyle(this._element.nativeElement, "transform", null);
+        this._renderer.setElementStyle(this._element.nativeElement, "-webkit-transform", null);
+        
+        if (this.service.isVisible && this.service.transition != SidebarTransition.Overlay && this.service.transition != SidebarTransition.ScaleDown) {
+            const translate = `translate3d(${this.service.width}px, ${this.service.height}px, 0)`;
+            this._renderer.setElementStyle(this._element.nativeElement, "transform", translate);
+            this._renderer.setElementStyle(this._element.nativeElement, "-webkit-transform", translate);
+        }
+    }
+
+    @HostListener("click", ["$event"])
+    public onClick(event:MouseEvent) {
+        if (this.service.isVisible && !this.service.wasJustOpened) {
+            this.service.setVisibleState(false);
+        }
+    }
+}
\ No newline at end of file
diff --git a/components/sidebar/sidebar.module.ts b/components/sidebar/sidebar.module.ts
new file mode 100644
index 000000000..0c0100fd0
--- /dev/null
+++ b/components/sidebar/sidebar.module.ts
@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from "@angular/common";
+import {SuiSidebar} from './sidebar';
+import {SuiSidebarContainer} from './sidebar-container';
+import {SuiSidebarSibling} from './sidebar-sibling';
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    declarations: [
+        SuiSidebar,
+        SuiSidebarContainer,
+        SuiSidebarSibling
+    ],
+    exports: [
+        SuiSidebar,
+        SuiSidebarContainer,
+        SuiSidebarSibling
+    ]
+})
+export class SuiSidebarModule {}
diff --git a/components/sidebar/sidebar.service.ts b/components/sidebar/sidebar.service.ts
new file mode 100644
index 000000000..49d2c4d2e
--- /dev/null
+++ b/components/sidebar/sidebar.service.ts
@@ -0,0 +1,103 @@
+import {EventEmitter} from '@angular/core';
+
+export type SidebarTransition = "overlay" | "push" | "scale down" | "uncover" | "slide along" | "slide out";
+
+export const SidebarTransition = {
+    Overlay: "overlay" as SidebarTransition,
+    Push: "push" as SidebarTransition,
+    ScaleDown: "scale down" as SidebarTransition,
+    Uncover: "uncover" as SidebarTransition,
+    SlideAlong: "slide along" as SidebarTransition,
+    SlideOut: "slide out" as SidebarTransition
+}
+
+export type SidebarDirection = "left" | "right" | "top" | "bottom";
+
+export const SidebarDirection = {
+    Left: "left" as SidebarDirection,
+    Right: "right" as SidebarDirection,
+    Top: "top" as SidebarDirection,
+    Bottom: "bottom" as SidebarDirection
+}
+
+export class SidebarService {
+    public isVisible:boolean;
+    public isAnimating:boolean;
+    public wasJustOpened:boolean;
+
+    public direction:SidebarDirection;
+    
+    private _width:number;
+    private _height:number;
+
+    public get width() {
+        if (this.direction == SidebarDirection.Left) {
+            return this._width;
+        }
+        if (this.direction == SidebarDirection.Right) {
+            return -this._width;
+        }
+        return 0;
+    }
+
+    public set width(width:number) {
+        this._width = width;
+        this.widthChange.emit();
+    }
+
+    public get height() {
+        if (this.direction == SidebarDirection.Top) {
+            return this._height;
+        }
+        if (this.direction == SidebarDirection.Bottom) {
+            return -this._height;
+        }
+        return 0;
+    }
+
+    public set height(height:number) {
+        this._height = height;
+        this.heightChange.emit();
+    }
+
+    public isVisibleChange:EventEmitter<boolean>;
+    public widthChange:EventEmitter<void>;
+    public heightChange:EventEmitter<void>;
+
+    private _isAnimatingTimeout:any;
+
+    public transition:SidebarTransition;
+
+    constructor(isVisible:boolean = false) {
+        this.isVisible = isVisible;
+        this.isAnimating = false;
+        this.wasJustOpened = false;
+
+        this.isVisibleChange = new EventEmitter<boolean>();
+        this.widthChange = new EventEmitter<void>();
+        this.heightChange = new EventEmitter<void>();
+
+        this.width = 260;
+        this.height = 0;
+
+        this.transition = SidebarTransition.Uncover;
+    }
+
+    public setVisibleState(isVisible:boolean) {
+        if (this.isVisible != isVisible) {
+            this.isVisible = isVisible;
+            this.isAnimating = true;
+            this.wasJustOpened = true;
+
+            this.isVisibleChange.emit(isVisible);
+
+            setTimeout(() => this.wasJustOpened = false);
+            clearTimeout(this._isAnimatingTimeout);
+            this._isAnimatingTimeout = setTimeout(() => this.isAnimating = false, 500);
+        }
+    }
+
+    public toggleVisibleState() {
+        this.setVisibleState(!this.isVisible);
+    }
+}
\ No newline at end of file
diff --git a/components/sidebar/sidebar.ts b/components/sidebar/sidebar.ts
new file mode 100644
index 000000000..449fc5e62
--- /dev/null
+++ b/components/sidebar/sidebar.ts
@@ -0,0 +1,94 @@
+import {Component, HostBinding, Input, Output, Renderer, ElementRef, EventEmitter} from '@angular/core';
+import {SidebarService, SidebarTransition, SidebarDirection} from './sidebar.service';
+
+@Component({
+    selector: 'sui-sidebar',
+    template: `<ng-content></ng-content>`
+})
+export class SuiSidebar {
+    public service:SidebarService;
+
+    @HostBinding("class.ui")
+    @HostBinding("class.sidebar")
+    @HostBinding("class.menu")
+    private _sidebarClasses:boolean;
+
+    @Input()
+    public get transition() {
+        return this.service.transition;
+    }
+
+    public set transition(transition:SidebarTransition) {
+        this.service.transition.split(" ").forEach(c => this.setClass(c, false));
+
+        this.service.transition = transition;
+
+        this.service.transition.split(" ").forEach(c => this.setClass(c, true));
+    }
+
+    @Input()
+    public get direction() {
+        return this.service.direction;
+    }
+
+    public set direction(direction:SidebarDirection) {
+        this.setClass(this.service.direction, false);
+
+        this.service.direction = direction;
+
+        this.setClass(this.service.direction, true);
+    }
+
+    @HostBinding("class.visible")
+    @Input()
+    public get isVisible() {
+        return this.service.isVisible;
+    }
+
+    public set isVisible(isVisible:boolean) {
+        this.service.setVisibleState(isVisible);
+    }
+
+    @Output()
+    public get isVisibleChange() {
+        return this.service.isVisibleChange;
+    }
+
+    @HostBinding("class.animating")
+    public get isAnimating() {
+        return this.service.isAnimating;
+    }
+
+    constructor(private _renderer:Renderer, private _element:ElementRef) {
+        this.service = new SidebarService();
+        // We set the default here as well to force the classes to update.
+        this.transition = SidebarTransition.Uncover;
+        this.direction = SidebarDirection.Left;
+
+        setTimeout(() => this.updateDimensions());
+        this.service.isVisibleChange.subscribe(() => this.updateDimensions());
+
+        this._sidebarClasses = true;
+    }
+
+    private updateDimensions() {
+        this.service.width = this._element.nativeElement.offsetWidth;
+        this.service.height = this._element.nativeElement.offsetHeight;
+    }
+
+    private setClass(className:string, isAdd:boolean = true) {
+        this._renderer.setElementClass(this._element.nativeElement, className, isAdd);
+    }
+
+    public open() {
+        this.service.setVisibleState(true);
+    }
+
+    public close() {
+        this.service.setVisibleState(false);
+    }
+
+    public toggle() {
+        this.service.toggleVisibleState();
+    }
+}
\ No newline at end of file
diff --git a/components/sui.module.ts b/components/sui.module.ts
index efbbc3bbf..313f82929 100644
--- a/components/sui.module.ts
+++ b/components/sui.module.ts
@@ -10,6 +10,7 @@ import {SuiPopupModule} from './popup/popup.module';
 import {SuiProgressModule} from "./progress/progress.module";
 import {SuiRatingModule} from "./rating/rating.module";
 import {SuiSearchModule} from "./search/search.module";
+import {SuiSidebarModule} from "./sidebar/sidebar.module";
 import {SuiTabsModule} from "./tabs/tab.module";
 import {SuiSelectModule} from "./select/select.module";
 import {SuiTransitionModule} from "./transition/transition.module";
@@ -27,6 +28,7 @@ import {SuiTransitionModule} from "./transition/transition.module";
         SuiRatingModule,
         SuiSearchModule,
         SuiSelectModule,
+        SuiSidebarModule,
         SuiTabsModule,
         SuiTransitionModule
     ]
diff --git a/components/tabs/tab.ts b/components/tabs/tab.ts
index c35a95250..02930e5ea 100644
--- a/components/tabs/tab.ts
+++ b/components/tabs/tab.ts
@@ -42,7 +42,7 @@ export class SuiTab {
     public get isActive() { return this._isActive; }
 
     public set isActive(value:boolean) {
-        var change = this._isActive != value;
+        let change = this._isActive != value;
         this._isActive = value;
         if (this._content) {
             this._content.isActive = value;
@@ -61,7 +61,7 @@ export class SuiTab {
     }
 
     public set isDisabled(value:boolean) {
-        var change = this._isDisabled != value;
+        let change = this._isDisabled != value;
 
         this._isDisabled = value;
 
diff --git a/components/tabs/tabset.ts b/components/tabs/tabset.ts
index 44e143dbd..e46a30ff3 100644
--- a/components/tabs/tabset.ts
+++ b/components/tabs/tabset.ts
@@ -45,7 +45,7 @@ export class SuiTabset implements AfterContentInit {
             //Assuming they have an associated content
             if (!t.content) {
                 //Link the content header with the content with the same ID excluding ones that are already linked
-                var possibleContents = this._tabContents.filter((tC:SuiTabContent) => tC.id == t.id);
+                let possibleContents = this._tabContents.filter((tC:SuiTabContent) => tC.id == t.id);
                 if (possibleContents.length == 0) {
                     throw new Error("A [suiTabHeader] must have a related [suiTabContent].");
                 }
@@ -104,7 +104,7 @@ export class SuiTabset implements AfterContentInit {
     //This activates the first content that isn't disabled
     private activateFirstTab() {
         //Filter out all disabled tabs from the currently loaded list and take the first one
-        var firstAvailable = this._loadedTabs.filter((tH:SuiTab) => !tH.isDisabled)[0];
+        let firstAvailable = this._loadedTabs.filter((tH:SuiTab) => !tH.isDisabled)[0];
         if (firstAvailable) {
             //If there is one available, activate it and set it to the currently active content
             firstAvailable.isActive = true;
@@ -115,10 +115,10 @@ export class SuiTabset implements AfterContentInit {
     //This activates the closest available content to the one provided
     private activateClosestTab(tab:SuiTab) {
         //Grab a list of all of the loaded tabs that aren't disabled (excluding the one we are leaving)
-        var availableTabs = this._loadedTabs
+        let availableTabs = this._loadedTabs
             .filter((tH:SuiTab) => !tH.isDisabled);
 
-        var tabIndex = tab.index;
+        let tabIndex = tab.index;
 
         // Only change the tabIndex if we have to.
         if (tabIndex >= availableTabs.length) {
diff --git a/demo/src/app/app.component.css b/demo/src/app/app.component.css
new file mode 100644
index 000000000..f454d50a5
--- /dev/null
+++ b/demo/src/app/app.component.css
@@ -0,0 +1,76 @@
+:host {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.pusher {
+    height: 100%;
+}
+
+.pusher > .full.height {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.pusher > .full.height {
+    background-color: #FFFFFF;
+}
+
+.full.height > .toc {
+    position: relative;
+    z-index: 1;
+    background-color: #1b1c1d;
+    width: 250px;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+}
+
+.full.height > .toc .ui.menu {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    border-radius: 0;
+    border-width: 0 1px 0 0;
+    box-shadow: none;
+    margin: 0;
+    width: inherit;
+    overflow-x: hidden;
+    will-change: transform;
+}
+
+.article {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    min-width: 0px;
+}
+
+.article > .ui.top.attached.menu {
+    display: none;
+    border-radius: 0;
+}
+
+@media only screen and (max-width: 1200px) {
+    .article > .ui.top.attached.menu {
+        display: flex;
+    }
+
+    .toc {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
index 5a9c8cd3b..24ac537d8 100644
--- a/demo/src/app/app.component.html
+++ b/demo/src/app/app.component.html
@@ -1,38 +1,25 @@
-<div class="sidebar">
-    <div class="ui vertical inverted fluid menu">
-        <div class="item">
-            <a class="ui mini images">
-                <img class="ui image" src="http://semantic-ui.com/images/logo.png">
-                <img class="ui image" src="https://angular.io/resources/images/logos/standard/shield-large.png">
-            </a>
-            <b class="logo">ng2-semantic-ui</b>
-        </div>
-        <a class="item" routerLink="/getting-started" routerLinkActive="active">
-            <b>Getting Started</b>
-        </a>
-        <a class="item" href="https://github.com/edcarroll/ng2-semantic-ui">
-            <b>Github Repository</b>
-        </a>
-        <div class="item">
-            <div class="active header">Components</div>
-            <div class="menu">
-                <a class="item" routerLink="/components/accordion" routerLinkActive="active">Accordion</a>
-                <a class="item" routerLink="/components/checkbox" routerLinkActive="active">Checkbox</a>
-                <a class="item" routerLink="/components/collapse" routerLinkActive="active">Collapse</a>
-                <a class="item" routerLink="/components/dimmer" routerLinkActive="active">Dimmer</a>
-                <a class="item" routerLink="/components/dropdown" routerLinkActive="active">Dropdown</a>
-                <a class="item" routerLink="/components/message" routerLinkActive="active">Message</a>
-                <a class="item" routerLink="/components/popup" routerLinkActive="active">Popup</a>
-                <a class="item" routerLink="/components/progress" routerLinkActive="active">Progress</a>
-                <a class="item" routerLink="/components/rating" routerLinkActive="active">Rating</a>
-                <a class="item" routerLink="/components/search" routerLinkActive="active">Search</a>
-                <a class="item" routerLink="/components/select" routerLinkActive="active">Select</a>
-                <a class="item" routerLink="/components/tabs" routerLinkActive="active">Tabs</a>
-                <a class="item" routerLink="/components/transition" routerLinkActive="active">Transition</a>
+<sui-sidebar-container>
+    <sui-sidebar class="vertical inverted" transition="overlay" direction="left" #sidebar>
+        <demo-sidebar (onItemSelected)="sidebar.close()"></demo-sidebar>
+    </sui-sidebar>
+    <sui-sidebar-sibling [isDimmedWhenVisible]="true">
+        <div class="full height">
+            <div class="toc">
+                <div class="ui vertical inverted menu">
+                    <demo-sidebar></demo-sidebar>
+                </div>
+            </div>
+            <div class="article">
+                <div class="ui top attached inverted menu">
+                    <a class="launch icon item" (click)="sidebar.open()">
+                        <i class="content icon"></i>
+                    </a>
+                    <div class="right item">
+                        <demo-github-buttons [mega]="false"></demo-github-buttons>
+                    </div>
+                </div>
+                <router-outlet></router-outlet>
             </div>
         </div>
-    </div>
-</div>
-<div class="article">
-    <router-outlet></router-outlet>
-</div>
+    </sui-sidebar-sibling>
+</sui-sidebar-container>
\ No newline at end of file
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
index 4361e2c33..3880cdced 100644
--- a/demo/src/app/app.component.ts
+++ b/demo/src/app/app.component.ts
@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import {Component, HostBinding} from '@angular/core';
 
 @Component({
     selector: 'demo-root',
-    templateUrl: './app.component.html'
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
 })
 export class AppComponent {}
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
index f50de2105..bf88ac6a0 100644
--- a/demo/src/app/app.module.ts
+++ b/demo/src/app/app.module.ts
@@ -4,8 +4,8 @@ import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {AppComponent} from './app.component';
 import {DemoRoutingModule} from './app.routing';
+import {SuiSidebarModule} from '../../../components/sidebar/sidebar.module';
 import {GettingStartedPage} from './pages/getting-started/getting-started.page';
-import {SuiModule} from "../../../components";
 
 import {CollapsePageComponents} from './pages/collapse/collapse.page';
 import {AccordionPageComponents} from "./pages/accordion/accordion.page";
@@ -24,11 +24,14 @@ import {TransitionPageComponents} from "./pages/transition/transition.page";
 import {DemoComponentsModule} from './components/demo-components.module';
 import {DemoPagesModule} from './pages/demo-pages.module';
 
+
 @NgModule({
     imports: [
         BrowserModule,
         CommonModule,
 
+        SuiSidebarModule,
+
         DemoRoutingModule,
         DemoComponentsModule,
         DemoPagesModule
diff --git a/demo/src/app/app.routing.ts b/demo/src/app/app.routing.ts
index 05ee398c6..8e0dfb9b7 100644
--- a/demo/src/app/app.routing.ts
+++ b/demo/src/app/app.routing.ts
@@ -16,6 +16,7 @@ import {TabsPage} from "./pages/tabs/tabs.page";
 import {TestPage} from "./pages/test/test.page";
 import {SelectPage} from "./pages/select/select.page";
 import {TransitionPage} from "./pages/transition/transition.page";
+import {SidebarPage} from './pages/sidebar/sidebar.page';
 
 const appRoutes: Routes = [
     {
@@ -66,6 +67,10 @@ const appRoutes: Routes = [
         path: 'components/select',
         component: SelectPage
     },
+    {
+        path: 'components/sidebar',
+        component: SidebarPage
+    },
     {
         path: 'components/tabs',
         component: TabsPage
diff --git a/demo/src/app/components/demo-components.module.ts b/demo/src/app/components/demo-components.module.ts
index e8d77694c..5f36756ac 100644
--- a/demo/src/app/components/demo-components.module.ts
+++ b/demo/src/app/components/demo-components.module.ts
@@ -1,29 +1,38 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
 import {SuiCollapseModule} from '../../../../components/collapse/collapse.module';
 import {ApiComponent} from './api/api.component';
 import {CodeblockComponent} from './codeblock/codeblock.component';
 import {ExampleComponent} from './example/example.component';
 import {PageTitleComponent} from './page-title/page-title.component';
 import {PageContentComponent} from './page-content/page-content.component';
+import {SidebarComponent} from './sidebar/sidebar.component';
+import {GithubButtonsComponent} from './github-buttons/github-buttons.component';
 
 @NgModule({
     imports: [
         CommonModule,
+        RouterModule,
+
         SuiCollapseModule
     ],
     declarations: [
+        SidebarComponent,
         ApiComponent,
         CodeblockComponent,
         ExampleComponent,
         PageTitleComponent,
+        GithubButtonsComponent,
         PageContentComponent
     ],
     exports: [
+        SidebarComponent,
         ApiComponent,
         CodeblockComponent,
         ExampleComponent,
         PageTitleComponent,
+        GithubButtonsComponent,
         PageContentComponent
     ]
 })
diff --git a/demo/src/app/components/github-buttons/github-buttons.component.html b/demo/src/app/components/github-buttons/github-buttons.component.html
new file mode 100644
index 000000000..b0b66d296
--- /dev/null
+++ b/demo/src/app/components/github-buttons/github-buttons.component.html
@@ -0,0 +1,28 @@
+<ng-container *ngIf="mega">
+    <iframe allowtransparency="true"
+            scrolling="no"
+            frameborder="0"
+            src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fedcarroll%2Fng2-semantic-ui&amp;text=Fork&amp;data-count-api=%2Frepos%2Fedcarroll%2Fng2-semantic-ui%23forks_count&amp;data-count-href=%2Fedcarroll%2Fng2-semantic-ui%2Fforks&amp;data-count-aria-label=%23%20forks%20on%20GitHub&amp;data-style=mega&amp;data-icon=octicon-repo-forked&amp;aria-label=Fork%20edcarroll%2Fng2-semantic-ui%20on%20GitHub"
+            width="110"
+            height="28"></iframe>
+    <iframe allowtransparency="true"
+            scrolling="no"
+            frameborder="0"
+            src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fedcarroll%2Fng2-semantic-ui&amp;text=Star&amp;data-count-api=%2Frepos%2Fedcarroll%2Fng2-semantic-ui%23stargazers_count&amp;data-count-href=%2Fedcarroll%2Fng2-semantic-ui%2Fstargazers&amp;data-count-aria-label=%23%20stargazers%20on%20GitHub&amp;data-style=mega&amp;data-icon=octicon-star&amp;aria-label=Star%20edcarroll%2Fng2-semantic-ui%20on%20GitHub"
+            width="110"
+            height="28"></iframe>
+</ng-container>
+<ng-container *ngIf="!mega">
+    <iframe allowtransparency="true"
+            scrolling="no"
+            frameborder="0"
+            src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fedcarroll%2Fng2-semantic-ui&amp;text=Fork&amp;data-count-api=%2Frepos%2Fedcarroll%2Fng2-semantic-ui%23forks_count&amp;data-count-href=%2Fedcarroll%2Fng2-semantic-ui%2Fforks&amp;data-count-aria-label=%23%20forks%20on%20GitHub&amp;data-icon=octicon-repo-forked&amp;aria-label=Fork%20edcarroll%2Fng2-semantic-ui%20on%20GitHub"
+            width="75"
+            height="20"></iframe>
+    <iframe allowtransparency="true"
+            scrolling="no"
+            frameborder="0"
+            src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fedcarroll%2Fng2-semantic-ui&amp;text=Star&amp;data-count-api=%2Frepos%2Fedcarroll%2Fng2-semantic-ui%23stargazers_count&amp;data-count-href=%2Fedcarroll%2Fng2-semantic-ui%2Fstargazers&amp;data-count-aria-label=%23%20stargazers%20on%20GitHub&amp;data-icon=octicon-star&amp;aria-label=Star%20edcarroll%2Fng2-semantic-ui%20on%20GitHub"
+            width="85"
+            height="20"></iframe>
+</ng-container>
\ No newline at end of file
diff --git a/demo/src/app/components/github-buttons/github-buttons.component.ts b/demo/src/app/components/github-buttons/github-buttons.component.ts
new file mode 100644
index 000000000..d20b8ab20
--- /dev/null
+++ b/demo/src/app/components/github-buttons/github-buttons.component.ts
@@ -0,0 +1,10 @@
+import {Component, HostBinding, Input} from '@angular/core';
+
+@Component({
+    selector: 'demo-github-buttons',
+    templateUrl: './github-buttons.component.html'
+})
+export class GithubButtonsComponent {
+    @Input()
+    public mega:boolean = true;
+}
diff --git a/demo/src/app/components/page-content/page-content.component.css b/demo/src/app/components/page-content/page-content.component.css
index 452d96c70..87ba68ea3 100644
--- a/demo/src/app/components/page-content/page-content.component.css
+++ b/demo/src/app/components/page-content/page-content.component.css
@@ -1,9 +1,9 @@
 :host.ui.main.container {
     margin-left: 3em !important;
-    margin-right: 387px !important;
+    margin-right: 3em !important;
+    margin-bottom: 3em !important;
+    width: auto !important;
     max-width: 960px !important;
-    padding: 2em 0 7em;
-    position: relative;
 }
 
 :host.ui.main.container > h2 {
@@ -11,8 +11,22 @@
     margin: 5rem 0rem 3rem;
 }
 
-:host.ui.main.container > .rail + h2,
 :host.ui.main.container > h2:first-child {
     margin-top: 0;
 }
 
+@media only screen and (max-width: 1024px) {
+    :host.ui.main.container {
+        margin-left: 2em !important;
+        margin-right: 2em !important;
+        margin-bottom: 1em !important;
+    }
+}
+
+@media only screen and (max-width: 425px) {
+    :host.ui.main.container {
+        margin-left: 1em !important;
+        margin-right: 1em !important;
+        margin-bottom: 1em !important;
+    }
+}
\ No newline at end of file
diff --git a/demo/src/app/components/page-content/page-content.component.ts b/demo/src/app/components/page-content/page-content.component.ts
index 4e0158ebd..fcd511d7c 100644
--- a/demo/src/app/components/page-content/page-content.component.ts
+++ b/demo/src/app/components/page-content/page-content.component.ts
@@ -3,7 +3,6 @@ import {Component, HostBinding} from '@angular/core';
 @Component({
     selector: 'demo-page-content',
     template: `
-<div class="ui dividing right rail"></div>
 <ng-content></ng-content>
 `,
     styleUrls: ['./page-content.component.css']
diff --git a/demo/src/app/components/page-title/page-title.component.css b/demo/src/app/components/page-title/page-title.component.css
index cd8731ab0..27e0f3100 100644
--- a/demo/src/app/components/page-title/page-title.component.css
+++ b/demo/src/app/components/page-title/page-title.component.css
@@ -1,32 +1,34 @@
-:host.ui.masthead.segment > .container, .main.container, .fixed.menu > .container {
-    margin-left: 3em !important;
-    margin-right: 3em !important;
-    width: auto !important;
-    max-width: 960px !important;
-}
-
 :host.ui.masthead.segment {
     display: block;
     position: relative;
-    z-index: 1;
-    margin: 0;
-    padding: 3em 0;
-    background-color: #FFFFFF;
-    border-bottom: 1px solid #DDDDDD;
-    box-shadow: none;
+    margin: 0 0 3em 0;
+    padding: 3em;
 }
 
-:host > .container {
-    margin-right: 387px !important;
-}
-
-:host > .container, .main.container, .fixed.menu > .container {
-    margin-left: 3em !important;
-    margin-right: 3em !important;
-    width: auto !important;
-    max-width: 960px !important;
+.ui.header {
+    width: 960px;
 }
 
 .github {
     float: right;
+}
+
+@media only screen and (max-width: 1200px) {
+    .github {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 1024px) {
+    :host.ui.masthead.segment {
+        margin-bottom: 2em;
+        padding: 2em;
+    }
+}
+
+@media only screen and (max-width: 425px) {
+    :host.ui.masthead.segment {
+        margin-bottom: 1em;
+        padding: 1em;
+    }
 }
\ No newline at end of file
diff --git a/demo/src/app/components/page-title/page-title.component.html b/demo/src/app/components/page-title/page-title.component.html
index f6d95bbe3..881a8e333 100644
--- a/demo/src/app/components/page-title/page-title.component.html
+++ b/demo/src/app/components/page-title/page-title.component.html
@@ -1,9 +1,9 @@
-<div class="ui container">
-    <h1 class="ui header">
-        <ng-content select="[header]"></ng-content>
-        <div class="sub header">
-            <iframe class="github" src="https://ghbtns.com/github-btn.html?user=edcarroll&repo=ng2-semantic-ui&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
-            <ng-content select="[sub-header]"></ng-content>
+<h1 class="ui header">
+    <ng-content select="[header]"></ng-content>
+    <div class="sub header">
+        <div class="github">
+            <demo-github-buttons></demo-github-buttons>
         </div>
-    </h1>
-</div>
+        <ng-content select="[sub-header]"></ng-content>
+    </div>
+</h1>
\ No newline at end of file
diff --git a/demo/src/app/components/sidebar/sidebar.component.css b/demo/src/app/components/sidebar/sidebar.component.css
new file mode 100644
index 000000000..4cb1c1ddb
--- /dev/null
+++ b/demo/src/app/components/sidebar/sidebar.component.css
@@ -0,0 +1,9 @@
+.ui.image {
+    margin: -0.25rem 0.25rem 0 0.25rem !important;
+}
+
+.logo {
+    margin-left: 10px;
+    font-size: 16px;
+    vertical-align: sub;
+}
\ No newline at end of file
diff --git a/demo/src/app/components/sidebar/sidebar.component.html b/demo/src/app/components/sidebar/sidebar.component.html
new file mode 100644
index 000000000..e756140dc
--- /dev/null
+++ b/demo/src/app/components/sidebar/sidebar.component.html
@@ -0,0 +1,32 @@
+<div class="item">
+    <a class="ui mini images">
+        <img class="ui image" src="http://semantic-ui.com/images/logo.png">
+        <img class="ui image" src="https://angular.io/resources/images/logos/standard/shield-large.png" href="">
+    </a>
+    <b class="logo">ng2-semantic-ui</b>
+</div>
+<a class="item" routerLink="/getting-started" routerLinkActive="active">
+    <b>Getting Started</b>
+</a>
+<a class="item" href="https://github.com/edcarroll/ng2-semantic-ui">
+    <b>Github Repository</b>
+</a>
+<div class="item">
+    <div class="active header">Components</div>
+    <div class="menu">
+        <a class="item" routerLink="/components/accordion" routerLinkActive="active">Accordion</a>
+        <a class="item" routerLink="/components/checkbox" routerLinkActive="active">Checkbox</a>
+        <a class="item" routerLink="/components/collapse" routerLinkActive="active">Collapse</a>
+        <a class="item" routerLink="/components/dimmer" routerLinkActive="active">Dimmer</a>
+        <a class="item" routerLink="/components/dropdown" routerLinkActive="active">Dropdown</a>
+        <a class="item" routerLink="/components/message" routerLinkActive="active">Message</a>
+        <a class="item" routerLink="/components/popup" routerLinkActive="active">Popup</a>
+        <a class="item" routerLink="/components/progress" routerLinkActive="active">Progress</a>
+        <a class="item" routerLink="/components/rating" routerLinkActive="active">Rating</a>
+        <a class="item" routerLink="/components/search" routerLinkActive="active">Search</a>
+        <a class="item" routerLink="/components/select" routerLinkActive="active">Select</a>
+        <a class="item" routerLink="/components/sidebar" routerLinkActive="active">Sidebar</a>
+        <a class="item" routerLink="/components/tabs" routerLinkActive="active">Tabs</a>
+        <a class="item" routerLink="/components/transition" routerLinkActive="active">Transition</a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/demo/src/app/components/sidebar/sidebar.component.ts b/demo/src/app/components/sidebar/sidebar.component.ts
new file mode 100644
index 000000000..310bf9c47
--- /dev/null
+++ b/demo/src/app/components/sidebar/sidebar.component.ts
@@ -0,0 +1,29 @@
+import {Component, HostBinding, Output, EventEmitter, HostListener} from '@angular/core';
+// Polyfill for IE
+import "element-closest";
+
+interface AugmentedElement extends Element {
+    closest(selector:string):AugmentedElement;
+}
+
+@Component({
+    selector: 'demo-sidebar',
+    templateUrl: './sidebar.component.html',
+    styleUrls: ['./sidebar.component.css']
+})
+export class SidebarComponent {
+    @Output()
+    public onItemSelected:EventEmitter<void>;
+
+    constructor() {
+        this.onItemSelected = new EventEmitter<void>();
+    }
+
+    @HostListener("click", ["$event"])
+    public onClick(event:MouseEvent) {
+        const target = event.target as AugmentedElement;
+        if (/a/i.test(target.closest(".item").tagName)) {
+            this.onItemSelected.emit();
+        }
+    }
+}
diff --git a/demo/src/app/pages/demo-pages.module.ts b/demo/src/app/pages/demo-pages.module.ts
index ed84f7bdf..57e08ace7 100644
--- a/demo/src/app/pages/demo-pages.module.ts
+++ b/demo/src/app/pages/demo-pages.module.ts
@@ -21,6 +21,7 @@ import {TabsPageComponents} from './tabs/tabs.page';
 import {TransitionPageComponents} from './transition/transition.page';
 import {RouterModule} from '@angular/router';
 import {PopupPageComponents} from './popup/popup.page';
+import {SidebarPageComponents} from './sidebar/sidebar.page';
 
 @NgModule({
     imports: [
@@ -45,6 +46,7 @@ import {PopupPageComponents} from './popup/popup.page';
         RatingPageComponents,
         SearchPageComponents,
         SelectPageComponents,
+        SidebarPageComponents,
         TabsPageComponents,
         TransitionPageComponents
     ],
diff --git a/demo/src/app/pages/getting-started/getting-started.page.html b/demo/src/app/pages/getting-started/getting-started.page.html
index fbe15fa20..b4fee3e92 100644
--- a/demo/src/app/pages/getting-started/getting-started.page.html
+++ b/demo/src/app/pages/getting-started/getting-started.page.html
@@ -29,7 +29,7 @@ <h2 class="ui dividing header">Installation</h2>
     <p>Now you're good to go!</p>
     <h2 class="ui dividing header">Dependencies</h2>
     <div class="ui bulleted list">
-        <div class="item"><a href="https://angular.io">Angular 2</a> (>=2.0.0)</div>
+        <div class="item"><a href="https://angular.io">Angular 2</a> (^4.0.0)</div>
         <div class="item"><a href="http://semantic-ui.com/">Semantic UI CSS</a> (jQuery is <strong>not</strong> required)</div>
     </div>
 </demo-page-content>
diff --git a/demo/src/app/pages/popup/popup.page.ts b/demo/src/app/pages/popup/popup.page.ts
index b76f1fa32..bca947cd6 100644
--- a/demo/src/app/pages/popup/popup.page.ts
+++ b/demo/src/app/pages/popup/popup.page.ts
@@ -63,12 +63,12 @@ export class PopupPage {
 `;
 
     public exampleTemplateTemplate = `
-<template let-popup #popupTemplate>
+<ng-template let-popup #popupTemplate>
     <div class="header">Rating</div>
     <div class="content">
         <sui-rating class="star" (click)="popup.close()"></sui-rating>
     </div>
-</template>
+</ng-template>
 <button class="ui icon button" suiPopup [popupTemplate]="popupTemplate" popupTrigger="outsideClick">
     <i class="star icon"></i> Rate
 </button>
diff --git a/demo/src/app/pages/search/search.page.ts b/demo/src/app/pages/search/search.page.ts
index 4e2a5887d..7992b97d2 100644
--- a/demo/src/app/pages/search/search.page.ts
+++ b/demo/src/app/pages/search/search.page.ts
@@ -89,10 +89,10 @@ export class SearchExampleStandard {
 })
 export class SearchExampleRemote extends SearchExampleStandard {
     public optionsSearch(query:string):Promise<Array<any>> {
-        var options = SearchExampleStandard.standardOptions.map((o:string) => ({ title: o }));
+        let options = SearchExampleStandard.standardOptions.map((o:string) => ({ title: o }));
 
         return new Promise((resolve, reject) => {
-            var results = options.filter((o:any) => {
+            let results = options.filter((o:any) => {
                 return o.title.slice(0, query.length).toLowerCase() == query.toLowerCase();
             });
             setTimeout(() => {
diff --git a/demo/src/app/pages/select/select.page.html b/demo/src/app/pages/select/select.page.html
index 45488b712..a79061491 100644
--- a/demo/src/app/pages/select/select.page.html
+++ b/demo/src/app/pages/select/select.page.html
@@ -48,6 +48,21 @@ <h4 class="ui header">Templates</h4>
         </div>
         <select-example-template-search result></select-example-template-search>
     </demo-example>
+    <demo-example [code]="exampleSearchLookupTemplate">
+        <div info>
+            <h4 class="ui header">Search Selection Lookup (Advanced)</h4>
+            <p>A select can allow a user to search through a list of choices from API</p>
+        </div>
+        <div result>
+            <select-example-search-lookup></select-example-search-lookup>
+            <br>
+            <p>Setting the <code>[options]</code> property to a function that takes a query and returns a Promise allows remote lookups.</p>
+            <p>When using the <code>valueField</code> property in conjunction with <code>ngModel</code>, the lookup function must take a 2nd parameter string parameter, as shown below:</p>
+            <div class="ui segment">
+                <demo-codeblock language="typescript" [src]="searchLookupCode"></demo-codeblock>
+            </div>
+        </div>
+    </demo-example>
     <h2 id="api" class="ui dividing header">API</h2>
     <demo-api [api]="api"></demo-api>
 </demo-page-content>
diff --git a/demo/src/app/pages/select/select.page.ts b/demo/src/app/pages/select/select.page.ts
index 2b149ed32..5d163fca0 100644
--- a/demo/src/app/pages/select/select.page.ts
+++ b/demo/src/app/pages/select/select.page.ts
@@ -16,7 +16,7 @@ export class SelectPage {
                 },
                 {
                     name: "options",
-                    description: "Sets the options available to the select component."
+                    description: "Sets the options available to the select component. Can either be an array or a function that takes a query and returns a Promise for remote lookup."
                 },
                 {
                     name: "labelField",
@@ -71,7 +71,7 @@ export class SelectPage {
                 },
                 {
                     name: "options",
-                    description: "Sets the options available to the multi select component.",
+                    description: "Sets the options available to the multi select component. Can either be an array or a function that takes a query and returns a Promise for remote lookup.",
                     required: true
                 },
                 {
@@ -158,6 +158,36 @@ export class SelectPage {
 <div class="ui segment">
     <p>Currently selected: {{ selectedOption | json }}</p>
 </div>
+`;
+    public exampleSearchLookupTemplate:string = `
+<p>You can also use the keyboard to navigate.</p>
+<sui-select [(ngModel)]="selectedOption" [options]="optionsLookup" labelField="name" valueField="id" [isSearchable]="true" #searchSelect>
+    <sui-select-option *ngFor="let option of searchSelect.availableOptions" [value]="option"></sui-select-option>
+</sui-select>
+<div class="ui segment">
+    <p>Currently selected: {{ selectedOption | json }}</p>
+</div>
+`;
+    public searchLookupCode:string = `
+// The 2nd argument's type is that of the property specified by 'valueField'.
+let selectLookup = (query:string, initial:number) => {
+    if (initial != undefined) {
+        // Return a promise that resolves with the specified item.
+        return externalApi.findById(initial);
+    }
+    // Return a promise that resolves with a list of query results.
+    return externalApi.query(query);
+};
+
+// For a multi select lookup, the lookup is slightly different:
+let multiSelectLookup = (query:string, initials:number[]) => {
+    if (initial != undefined) {
+        // Return a promise that resolves with the specified items.
+        return externalApi.findByIds(initials);
+    }
+    // Return a promise that resolves with a list of query results.
+    return externalApi.query(query);
+};
 `;
     public exampleMultipleTemplate:string = `
 <sui-multi-select class="fluid" [(ngModel)]="selectedOptions" [options]="options" #multiSelect>
@@ -176,9 +206,9 @@ export class SelectPage {
 </div>
 `;
     public exampleTemplateSearchTemplate:string = `
-<template let-option #optionTemplate>
+<ng-template let-option #optionTemplate>
     <i class="child icon"></i>{{ option.name }}
-</template>
+</ng-template>
 <div class="ui form">
     <div class="field">
         <sui-select [(ngModel)]="selectedOption" [options]="options" labelField="name" [optionTemplate]="optionTemplate" [isSearchable]="true" #select>
@@ -231,6 +261,28 @@ export class SelectExampleSearch {
     public options:Array<any> = [{ name: "Example" }, { name: "Test" }, { name: "What" }, { name: "No" }, { name: "Benefit" }, { name: "Oranges" }, { name: "Artemis" }, { name: "Another" }];
 }
 
+@Component({
+    selector: 'select-example-search-lookup',
+    template: new SelectPage().exampleSearchLookupTemplate
+})
+export class SelectExampleLookupSearch {
+    private _options:Array<any> = [{ id: 1, name: "Example" }, { id: 2, name: "Test" }, { id: 3, name: "What" }, { id: 4, name: "No" }, { id: 5, name: "Benefit" }, { id: 6, name: "Oranges" }, { id: 7, name: "Artemis" }, { id: 8, name: "Another" }];
+    public optionsLookup = (query:string, initial:number) => {
+        if (initial != undefined) {
+            return new Promise((resolve, reject) => {
+                resolve(this._options.find((item) => item.id == initial));
+            });
+        }
+        else {
+            let regex:RegExp = new RegExp(query, 'i');
+            return new Promise((resolve, reject) => {
+                resolve(this._options.filter((item) => item.name.match(regex)));
+            });
+        }
+    };
+    public selectedOption = this._options[3]['id'];
+}
+
 @Component({
     selector: 'select-example-multiple',
     template: new SelectPage().exampleMultipleTemplate
@@ -258,4 +310,4 @@ export class SelectExampleTemplateSearch {
     public selectedOption = this.options[5];
 }
 
-export const SelectPageComponents:Array<any> = [SelectPage, SelectExampleStandard, SelectExampleOptions, SelectExampleSearch, SelectExampleMultiple, SelectExampleMultipleSearch, SelectExampleTemplateSearch];
+export const SelectPageComponents:Array<any> = [SelectPage, SelectExampleStandard, SelectExampleOptions, SelectExampleSearch, SelectExampleLookupSearch, SelectExampleMultiple, SelectExampleMultipleSearch, SelectExampleTemplateSearch];
diff --git a/demo/src/app/pages/sidebar/sidebar.page.html b/demo/src/app/pages/sidebar/sidebar.page.html
new file mode 100644
index 000000000..fa1b88f95
--- /dev/null
+++ b/demo/src/app/pages/sidebar/sidebar.page.html
@@ -0,0 +1,28 @@
+<demo-page-title>
+    <div header>Sidebar</div>
+    <div sub-header>
+        <p>A sidebar hides additional content beside a page</p>
+    </div>
+</demo-page-title>
+<demo-page-content>
+    <h2 class="ui dividing header">Examples</h2>
+    <demo-example [code]="exampleStandardTemplate">
+        <div info>
+            <h4 class="ui header">Sidebar</h4>
+            <p>A basic sidebar</p>
+        </div>
+        <sidebar-example-standard result></sidebar-example-standard>
+    </demo-example>
+    <demo-example [code]="exampleStandardTemplate">
+        <div info>
+            <h4 class="ui header">Direction</h4>
+            <p>Sidebars can have a custom direction</p>
+        </div>
+        <div result>
+            <sidebar-example-direction></sidebar-example-direction>
+        </div>
+    </demo-example>
+    <p>For a full page sidebar, just place all of your page content within a <code>sui-sidebar-container</code>.</p>
+    <h2 id="api" class="ui dividing header">API</h2>
+    <demo-api [api]="api"></demo-api>
+</demo-page-content>
diff --git a/demo/src/app/pages/sidebar/sidebar.page.ts b/demo/src/app/pages/sidebar/sidebar.page.ts
new file mode 100644
index 000000000..44ed01d9a
--- /dev/null
+++ b/demo/src/app/pages/sidebar/sidebar.page.ts
@@ -0,0 +1,105 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'demo-page-sidebar',
+  templateUrl: './sidebar.page.html'
+})
+export class SidebarPage {
+    public api = [
+        {
+            selector: "<sui-sidebar-container>"
+        },
+        {
+            selector: "<sui-sidebar>",
+            properties: [
+                {
+                    name: "isVisible",
+                    description: "Sets whether or not the sidebar is displayed.",
+                    defaultValue: "false"
+                },
+                {
+                    name: "direction",
+                    description: "Sets the direction of the sidebar relative to the <code>sui-sidebar-sibling</code> contents.",
+                    defaultValue: "left"
+                },
+                {
+                    name: "transition",
+                    description: "Sets the transition used when displaying the sidebar. Options are <code>overlay</code>, <code>uncover</code>, <code>scale down</code>, <code>push</code>, <code>slide along</code> & <code>slide out</code>.",
+                    defaultValue: "uncover"
+                }
+            ],
+            events: [
+                {
+                    name: "isVisibleChange",
+                    description: "Fires when the sidebar's visible state is changed. Supports <code>[(isVisible)]</code> syntax."
+                }
+            ]
+        },
+        {
+            selector: "<sui-sidebar-sibling>",
+            properties: [
+                {
+                    name: "isDimmedWhenVisible",
+                    description: "Sets whether the page content beside the sidebar is dimmed when the sidebar is visible.",
+                    defaultValue: "false"
+                }
+            ]
+        }
+    ];
+    public exampleStandardTemplate:string = `
+<div class="ui top attached demo menu">
+    <a class="item" (click)="sidebar.toggle()">
+        <i class="sidebar icon"></i> Menu
+    </a>
+</div>
+<sui-sidebar-container class="ui bottom attached segment">
+    <sui-sidebar class="inverted vertical" #sidebar>
+        <a class="item">1</a>
+        <a class="item">2</a>
+    </sui-sidebar>
+    <sui-sidebar-sibling [isDimmedWhenVisible]="true">
+        <div class="ui basic segment">
+            <h3 class="ui header">Content</h3>
+            <p>Example content beside the sidebar</p>
+            <button class="ui button" (click)="sidebar.open()">Open Sidebar</button>
+        </div>
+    </sui-sidebar-sibling>
+</sui-sidebar-container>
+`;
+    public exampleDirectionTemplate:string = `
+<div class="ui top attached demo menu">
+    <a class="item" (click)="sidebar.toggle()">
+        <i class="sidebar icon"></i> Menu
+    </a>
+</div>
+<sui-sidebar-container class="ui bottom attached segment">
+    <sui-sidebar class="inverted" direction="bottom" [(isVisible)]="isVisible" #sidebar>
+        <a class="item">1</a>
+        <a class="item">2</a>
+    </sui-sidebar>
+    <sui-sidebar-sibling>
+        <div class="ui basic segment">
+            <h3 class="ui header">Content</h3>
+            <p>Sidebar visibility: {{ isVisible }}</p>
+            <button class="ui button" (click)="sidebar.open()">Open Sidebar</button>
+        </div>
+    </sui-sidebar-sibling>
+</sui-sidebar-container>
+`;
+}
+
+@Component({
+    selector: 'sidebar-example-standard',
+    template: new SidebarPage().exampleStandardTemplate
+})
+export class SidebarExampleStandard {}
+
+@Component({
+    selector: 'sidebar-example-direction',
+    template: new SidebarPage().exampleDirectionTemplate
+})
+export class SidebarExampleDirection {
+    isVisible:boolean = false;
+}
+
+export const SidebarPageComponents:Array<any> = [SidebarPage, SidebarExampleStandard, SidebarExampleDirection];
diff --git a/demo/src/app/pages/test/test.page.html b/demo/src/app/pages/test/test.page.html
index ebecf8144..28eee2c5a 100644
--- a/demo/src/app/pages/test/test.page.html
+++ b/demo/src/app/pages/test/test.page.html
@@ -7,11 +7,32 @@
 <demo-page-content>
     <h2 class="ui dividing header">Examples</h2>
     <div class="ui segment">
-        <template let-option #optionTemplate>
-            <i class="child icon"></i>{{ option }}
-        </template>
-        <sui-multi-select class="fluid" [options]="options" [isSearchable]="true" [optionTemplate]="optionTemplate" #multiSelect>
-            <sui-select-option *ngFor="let option of multiSelect.availableOptions" [value]="option"></sui-select-option>
-        </sui-multi-select>
+        <div class="ui top attached demo menu">
+            <a class="item" (click)="sidebar.toggle()">
+                <i class="sidebar icon"></i> Menu
+            </a>
+        </div>
+        <sui-sidebar-container class="ui bottom attached segment">
+            <sui-sidebar class="inverted labeled icon" transition="uncover" direction="bottom" #sidebar>
+                <a class="item">
+                    <i class="home icon"></i>
+                    Home
+                </a>
+                <a class="item">
+                    <i class="block layout icon"></i>
+                    Topics
+                </a>
+            </sui-sidebar>
+            <sui-sidebar-sibling [isDimmedWhenVisible]="true">
+                <div class="ui basic segment">
+                    <h3 class="ui header">Application Content</h3>
+                    <p>Hello!</p>
+                    <p>Hello!</p>
+                    <p>Hello!</p>
+                    <p>Hello!</p>
+                    <button class="ui button" (click)="sidebar.open()">Sidebar</button>
+                </div>
+            </sui-sidebar-sibling>
+        </sui-sidebar-container>
     </div>
 </demo-page-content>
diff --git a/demo/src/app/pages/test/test.page.ts b/demo/src/app/pages/test/test.page.ts
index 6f3414c67..364df7640 100644
--- a/demo/src/app/pages/test/test.page.ts
+++ b/demo/src/app/pages/test/test.page.ts
@@ -4,11 +4,4 @@ import {Component} from '@angular/core';
     selector: 'demo-page-test',
     templateUrl: './test.page.html'
 })
-export class TestPage {
-    constructor() {}
-
-    public options = ["this", "is", "a", "test"];
-    public more = [{ test: "this" }, { test: "is" }, { test: "yet" }, { test: "another" }, { test: "test" }]
-
-    public selected = this.more[0];
-}
+export class TestPage {}
diff --git a/demo/src/styles.css b/demo/src/css/code.css
similarity index 85%
rename from demo/src/styles.css
rename to demo/src/css/code.css
index 2ede9f382..070245468 100644
--- a/demo/src/styles.css
+++ b/demo/src/css/code.css
@@ -1,40 +1,3 @@
-body {
-    font-size: 15px;
-}
-
-.sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 250px;
-    height: 100%;
-}
-
-.sidebar > .menu {
-    height: 100%;
-    border-radius: 0;
-}
-
-.article {
-    position: fixed;
-    top: 0;
-    left: 250px;
-    right: 0;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-.ui.image {
-    margin: -0.25rem 0.25rem 0 0.25rem !important;
-}
-
-.logo {
-    margin-left: 10px;
-    font-size: 16px;
-    vertical-align: sub;
-}
-
 p code, .description code {
     padding: 2px 4px;
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
diff --git a/demo/src/css/styles.css b/demo/src/css/styles.css
new file mode 100644
index 000000000..bc0a28567
--- /dev/null
+++ b/demo/src/css/styles.css
@@ -0,0 +1,3 @@
+body {
+    font-size: 15px;
+}
\ No newline at end of file
diff --git a/demo/src/index.html b/demo/src/index.html
index 92aaf8173..6bb03aae0 100644
--- a/demo/src/index.html
+++ b/demo/src/index.html
@@ -12,7 +12,7 @@
     <meta name="description" content="ng2-semantic-ui - Semantic UI Angular 2 Integrations">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.3/semantic.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/components/prism-bash.min.js"></script>
diff --git a/demo/test.ts b/demo/test.ts
index 430d4df98..5add7d94d 100644
--- a/demo/test.ts
+++ b/demo/test.ts
@@ -15,8 +15,8 @@ import {
 } from '@angular/platform-browser-dynamic/testing';
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
-declare var __karma__: any;
-declare var require: any;
+declare let __karma__: any;
+declare let require: any;
 
 // Prevent Karma from running prematurely.
 __karma__.loaded = function () {};
diff --git a/ng2-semantic-ui.ts b/ng2-semantic-ui.ts
deleted file mode 100644
index e2161b405..000000000
--- a/ng2-semantic-ui.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./components";
\ No newline at end of file
diff --git a/package.json b/package.json
index cb279a898..061075580 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "main": "ng2-semantic-ui.dist.js",
   "module": "index.js",
   "typings": "index.d.ts",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Angular 2 Semantic UI Components",
   "repository": {
     "type": "git",
@@ -32,24 +32,23 @@
     "build": "npm run compile && npm run package"
   },
   "dependencies": {
-    "@angular/common": ">=2.4.1",
-    "@angular/core": ">=2.4.1",
-    "@angular/forms": ">=2.4.1",
-    "@angular/http": ">=2.4.1",
-    "@angular/platform-browser": ">=2.4.1",
-    "core-js": ">=2.4.1",
+    "@angular/common": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "core-js": "^2.4.1",
+    "element-closest": "^2.0.2",
     "popper.js": "^1.0.6",
-    "reflect-metadata": "^0.1.3",
     "rxjs": "^5.0.1",
-    "ts-helpers": "^1.1.1",
-    "zone.js": "^0.7.0"
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-rc.2",
-    "@angular/compiler": "^2.4.1",
-    "@angular/compiler-cli": "^2.4.1",
-    "@angular/platform-browser-dynamic": "^2.4.0",
-    "@angular/router": "^3.4.0",
+    "@angular/cli": "^1.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
     "@types/prismjs": "~1.4.18",
     "@types/protractor": "~4.0.0",
     "@types/requirejs": "~2.1.28",
@@ -68,6 +67,6 @@
     "rollup-plugin-uglify": "~1.0.1",
     "ts-node": "~2.0.0",
     "tslint": "~4.3.1",
-    "typescript": "~2.0.5"
+    "typescript": "^2.1.6"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
index db66e20d8..00de760b5 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,4 +1,3 @@
-import rollup from 'rollup'
 import nodeResolve from 'rollup-plugin-node-resolve'
 import commonjs from 'rollup-plugin-commonjs';
 import uglify from 'rollup-plugin-uglify'
@@ -27,7 +26,10 @@ export default {
     plugins: [
         nodeResolve({ jsnext: true, module: true }),
         commonjs({
-            include: 'node_modules/rxjs/**',
+            include: [
+                'node_modules/rxjs/**',
+                'node_modules/element-closest/**'
+            ]
         }),
         uglify()
     ]
diff --git a/tsconfig.json b/tsconfig.json
index 1cfb92a6b..7015717b8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,10 +26,10 @@
         ]
     },
     "files": [
-        "index.ts",
-        "ng2-semantic-ui.ts"
+        "index.ts"
     ],
     "angularCompilerOptions": {
+        "annotateForClosureCompiler": true,
         "strictMetadataEmit": true
     }
 }